Rebuild JSON after $http.get with AngularJS
Question
Update
Following link provide a working demo with Highchart-ng and the JSON rebuild solution. If you try to use JSON data from Splunk in highchart, this will save your day :)
http://plnkr.co/edit/Nl47Hz5Cnj1jvUT3DTBt?p=preview
--
I am trying to get a JSON response from Splunk to fit into highchart, but im having real problems formating the data right.
I`ma really big fan of AngularJS, but I have some trubble wrapping my head around it, and hope some bright minds can help me.
I have been trying with loops to build the data, but with no luck. If you cant provide the whole solution, could someone please point me in the correct direction ? :)
Original data from $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
}
}
]
What i need the data to look like:
[
{
"name": "80",
"data": [34, 0, 0]
},
{
"name": "443",
"data": [234, 204, 0]
},
{
"name": "993",
"data": [311, 38, 90]
},
{
"name": "8080",
"data": [434, 546, 10]
}
]
The script i keep coming back to without any luck:
<!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>
3 answers
solution1
0 2015-03-20 20:15:42
您应该使用Array＃reduce操作在$ http服务的视图上重组检索到的数据，以将结果聚合到所需的结构中。
solution2
0 ACCPTED 2015-03-20 23:02:18
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));
solution3
0 2015-03-21 00:05:31
Here is a plain Javascript (ES5) solution that makes use of forEach and Object.keys therefore it will fail in IE8 and less if you don't have a polyfill .
var result = {};
data.forEach(function(item) {
Object.keys(item.Output).forEach(function(port) {
result[port] = result[port] || [];
result[port].push(item.Output[port]);
});
});
At this step result contains a map that, provided your data, looks like that :
{
'80': [34, 0, 0],
'443': [234, 204, 0],
'993': [311, 38, 90],
'8080': [434, 546, 10]
}
If you want to have in your data model an array of {name: '...', data: [...]} objects, here is a complementary step :
var finalArray = [];
Object.keys(result).forEach(function(port) {
finalArray.push({name: port, data: result[port]});
});
Final array :
[{
'name': '80',
'data': [34, 0, 0]
}, {
'name': '443',
'data': [234, 204, 0]
}, {
'name': '993',
'data': [311, 38, 90]
}, {
'name': '8080',
'data': [434, 546, 10]
}];
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.