AngularJS 구문 분석 응답

Question

WebSocket을 통해 서버에 ping 요청을 보낼 수있는 AngularJS 기반 SPA가 있습니다. 자세한 응답에서 서버의 Ping 응답을 구문 분석하고 싶습니다. 즉 핑이 성공했는지 실패했는지 알고 싶습니다 (아래 응답에서 굵게 표시된 정보 만 원합니다). 한 가지 더, 내가 달성하고 싶은 것은 실패의 경우, 실패한 핑/실패한 숫자가있는 빨간 빛을 보여주고, 성공한 경우 성공한 핑의 수는 총 송수신 횟수와 함께 표시됩니다. pingController.js 및 pingController.html을 살펴보십시오. 내 plunk입니다. Send ping command to server

<div ng-repeat="message in messages track by $index "> 
{{message}} 
</div> 

나는 내가 만든 여러 링크를 거쳐 AngularJS와의 필터를 시도 믿고, 나는이 일을 올바른 방법으로 생각하지 않았습니다.

SmartCartApp.filter('parseResponse', function() { 
    // function to invoke by Angular each time 
    // Angular passes in the `items` which is our Array 
    return function (messages) { 
    // Create a new Array 
    var filtered = []; 
    // loop through existing Array 
    for (var i = 0; i < messages.length; i++) { 
     var message = messages[i]; 
     var res = message.match(/Success/g); //this filters messages which has Success string in it. Looks like I need to create a multiple of those to just get Success/Failure 
     if(res !==null) 
     { 
     filtered.push(message); 
     } 

    } 
     return filtered; 
    }; 
}); 

서버 송신은 내 SPA의 성공/실패를 기반으로 응답합니다. 응답은 다음과 같습니다.

실패 :

NIC [] 0.000000,0.000000,0.000000,0.000000,0.000000,0.000000 [] 0,0,0,0,0,0 [] 0.000000,0.000000,0.000000,0.000000, 0.001479,0.000000 [,] 0,0,0,0,0,0 [/] 03/06/2017 17 : 43 : 28.0251 [;] 핑 [;] 상태 [;] www.google.com으로 핑 : 해결 된 주소 : 216.239.50.80 총 보낸 날짜 : 22 총 성공 : 0 총 오류 : 22 총 시간 초과 : 0 최소 RTT (ms) : 0 최대 RTT (ms) : 0 평균 RTT (ms) : 0.00 [ ] 03/06/2017 17 : 43 : 28.0251 [;] Ping 결과 [;] www.google.com [,] 거짓 [] 10 [] 1 [] 3 [] 0 [ ,] 216.239.50.80 [,] TtlExpired [,] True [,] TtlExpired [/] 03/06/2017 17 : 43 : 28.0813 [;] Ping [;] 실행 중 [;] FALSE [/] 03/06/2017 17 : 43 : 28.1874 [;] 총 트래픽 [;] 0.002960 [,] 0 [,] ] []] 트래픽 [NIC] [;] 트래픽 [NIC] 트래픽 [0] [0] 트래픽 [0] 0.000000,0.000000,0.000000,0.000000,0.000000,0.000000 [,] 0,0,0,0,0,0 [,] 0.000000,0.000000,0.000000,0.000000,0.000732,0.000000 [,] 0,0,0,0, 0,0 [0] [0] [0] [0] [1] 03/06/2017 17:48:45.3019 [;] 상태 [;] 에 대한 핑 : 해결 된 주소 : 173.223.238.158 총 보낸 사람 : 9 합계 성공 : 9 총 오류 : 0 총 시간 초과 : 0 최소 RTT (ms) : 8 최대 RTT (ms) : 14 평균 RTT (ms) : 10.33 [/] 03/06/2017 17 : 48 : 45.3031 [; ] 핑 [;] 핑 결과 [;] www.ibm.com []] 거짓 [] 10 [] 1 [] 3 [] 9 [] 173.223.238.158 [] 성공 [] 거짓 [] 없음 [/] 03/06/2017 17 : 48 : 46.2251 [;] 트래픽 [;] 총 트래픽 [;] 0.002205 [,] 0 [] 0.005805 [] 0 [] 2.057E + 09 [] ALL [/] 03/06/2017 17 : 48 : 46.2251 [;] 트래픽 NIC []에 의한 트래픽 0.000000,0.000000,0.000000,0.000000,0.002205,0.000000 [,] 0,0,0,0,0,0 [,] 0.000000, 0.000000,0.000000,0.000000,0.005805,0.000000 [,] 0,0,0,0,0,0 [/] 03/06/2017 17 : 48 : 47.2304 [;] 교통 [;] 총 교통 [;] 0.000867 [,] 0.002704 [,] 0 [,] 2.057E + 09 [,] ALL [/] 03/06/2017 17:48:47.2304 [;] 트래픽

Answer 1

나는 이것이 여러 가지 방법으로 행해질 수 있음을 발견했다. 1) 가장 쉬운 방법은 JavaScript에서 문자열의 match 속성을 사용하는 것이 었습니다. 각도 필터 또는 공장/서비스를 사용하여이 작업을 수행 할 수 있음을 알았습니다.
다음은 서비스를 사용하여 구현 한 것입니다.

myApp.service('ParseMessageService', function() { 
    this.myFunc = function(message) { 

    var res = message.match(/Success/g); 

    if (res !== null) { 
     //console.log(res); 
     TSent = message.match(/Total Sent: (\d+)/); 
     if (TSent) { 
     sent = TSent[1]; 
     //parsedMsg.push(TSent[1]); 
     //console.log(TSent[1]); //replace with $scope and display on Gui 
     } 
     TSucc = message.match(/Total Success: (\d+)/); 
     if (TSucc) { 
     succ = TSucc[1]; 
     //parsedMsg.push(TSucc[1]); 
     // console.log(TSucc[1]); //replace with $scope and display on Gui 
     } 
     TErr = message.match(/Total Errors: (\d+)/); 
     if (TErr) { 
     err = TErr[1]; 
     //parsedMsg.push(TErr[1]); 
     //console.log(TErr[1]); //replace with $scope and display on Gui 
     } 

    } 
    }