Rebuild JSON после $ http.get с AngularJS

Update

Следующая ссылка обеспечивает рабочую демонстрацию с Highchart-нг и JSON перестраивать решение. Если вы попытаетесь использовать данные в формате JSON с Splunk в highchart, это сэкономит ваш день :)

http://plnkr.co/edit/Nl47Hz5Cnj1jvUT3DTBt?p=preview

Я пытаюсь получить ответ JSON от Splunk, чтобы вписаться в highchart, но im, имеющие реальные проблемы с формированием права данных.

Я действительно большой поклонник AngularJS, но у меня есть несколько трубок, обертывающих мою голову вокруг, и надеюсь, что некоторые яркие умы могут мне помочь.

Я пытался с петлями построить данные, но не повезло. Если вы не можете предоставить полное решение, может кто-то, пожалуйста, указать мне в правильном направлении? :)

Исходные данные от $ http.get:

[ 
    { 
     "Time": "2015-03-20 20:45:00", 
     "Output": { 
      "80": 34, 
      "443": 234, 
      "993": 311, 
      "8080": 434 
     } 
    }, 
    { 
     "Time": "2015-03-20 20:40:00", 
     "Output": { 
      "80": 0, 
      "443": 204, 
      "993": 38, 
      "8080": 546 
     } 
    }, 
    { 
     "Time": "2015-03-20 20:35:00", 
     "Output": { 
      "80": 0, 
      "443": 0, 
      "993": 90, 
      "8080": 10 
     } 
    } 
]

Что мне нужно данные выглядеть следующим образом:

[ 
    { 
     "name": "80", 
     "data": [34, 0, 0] 
    }, 
    { 
     "name": "443", 
     "data": [234, 204, 0] 
    }, 
    { 
     "name": "993", 
     "data": [311, 38, 90] 
    }, 
    { 
     "name": "8080", 
     "data": [434, 546, 10] 
    } 
]

сценарий, я продолжаю возвращаться к без везения:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!-- Javascripts --> 
    <script src="//code.angularjs.org/1.3.14/angular.min.js"></script> 
    <script src="//code.angularjs.org/1.3.14/angular-animate.min.js"></script> 
    <script src="//code.highcharts.com/adapters/standalone-framework.js"></script> 
    <script src="//code.highcharts.com/highcharts.src.js"></script> 
    <script src="//rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script> 

    <!-- CSS --> 
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
</head> 

<script> 

var appname = angular.module('appname', ["highcharts-ng"]); 

appname.controller('appCtrl', ['$scope', '$http', 
    function($scope,$http) 
    { 

     $http.get("example1.json") 
      .success(function(data) { 
      process(data); 
     }); 

     function process(data) 
     { 
     } 
    $scope.chartConfig = { 
    options: { 
     chart: { 
      type: 'line' 
     } 
    }, 
    series: [{ 
     data: [] 
    },{ 
     data: [] 
    }], 
    title: { 
     text: 'Hello' 
    }, 

    loading: false 
} 

    } 
]); 

</script> 

<body> 
<div class="container"> 
    <div class="content"> 
     <div ng-app="appname" ng-controller="appCtrl"> 
      <highchart id="chart1" config="chartConfig"></highchart>   
     </div> 
    </div><!-- /.content --> 
</div><!-- /.container --> 

</body> 
</html>

источник

2015-03-20 Daniel Bjørnådal

Я не вижу корреляции между исходными данными и нужной продукции. –

Mike: Каждое значение «output» является concat со следующим, поэтому 80, который присутствует на 3 выходах, создаст [34, 0, 0] –

Gotcha ... См. Мой ответ. –

var data = [ 
    { 
    "Time": "2015-03-20 20:45:00", 
    "Output": { 
     "80": 34, 
     "443": 234, 
     "993": 311, 
     "8080": 434 
    } 
    }, 
    { 
    "Time": "2015-03-20 20:40:00", 
    "Output": { 
     "80": 0, 
     "443": 204, 
     "993": 38, 
     "8080": 546 
    } 
    }, 
    { 
    "Time": "2015-03-20 20:35:00", 
    "Output": { 
     "80": 0, 
     "443": 0, 
     "993": 90, 
     "8080": 10 
    } 
    } 
]; 


function process(data) { 
    var arrOutputKeys = Object.getOwnPropertyNames(data[0].Output), 
    outputArray = []; 

    arrOutputKeys.forEach(function (keyname) { 
    var propData = this.map(function (val) { 
     return val.Output[keyname]; 
    }, keyname); 
    outputArray.push({"name": keyname, "data": propData}); 
    }, data); 

    return outputArray; 
} 

console.log(process(data));

источник

2015-03-20 23:02:18

Вам нужно будет интегрировать возвращаемое значение в соответствующую переменную $ scope. –

Это решение было правильным.Ты спас меня от большого разочарования. Для всех пользователей Splunk, которые хотят проанализировать свои данные для HighChart, эта функция будет работать (с некоторым tweeking, чтобы соответствовать именам объектов c). –

Вы должны реструктурировать полученные данные с помощью службы $ http с помощью операции Array#reduce s, чтобы агрегировать результаты в вашу желаемую структуру.

источник

2015-03-20 20:15:42 Mark

Спасибо, что указал мне в этом направлении Марк, но мои навыки Javascript/AngularJS не доходят до этой передовой программы. :/Я все еще посмотрю и посмотрю, что я могу узнать. –

-1

Вот простой Javascript (ES5) решение, которое использует forEach и Object.keys поэтому подведет в IE8 и меньше, если у вас нет polyfill.

var result = {}; 
data.forEach(function(item) { 
    Object.keys(item.Output).forEach(function(port) { 
     result[port] = result[port] || []; 
     result[port].push(item.Output[port]); 
    }); 
});

На этом этапе result содержит карту, что, при условии данных, выглядит следующим образом:

{ 
    '80': [34, 0, 0], 
    '443': [234, 204, 0], 
    '993': [311, 38, 90], 
    '8080': [434, 546, 10] 
}

Если вы хотите, чтобы в вашей модели данных массив {name: '...', data: [...]} объектов, здесь дополнительный шаг:

var finalArray = []; 
Object.keys(result).forEach(function(port) { 
    finalArray.push({name: port, data: result[port]}); 
});

Окончательный Массив:

[{ 
    'name': '80', 
    'data': [34, 0, 0] 
}, { 
    'name': '443', 
    'data': [234, 204, 0] 
}, { 
    'name': '993', 
    'data': [311, 38, 90] 
}, { 
    'name': '8080', 
    'data': [434, 546, 10] 
}];

источник

2015-03-21 00:05:31

ответ

Смежные вопросы