在$ http.get之后使用AngularJS重建JSON

Question

Update 更新资料

Following link provide a working demo with Highchart-ng and the JSON rebuild solution. 以下链接提供了具有Highchart-ng和JSON重建解决方案的有效演示。 If you try to use JSON data from Splunk in highchart, this will save your day :) 如果您尝试在highchart中使用来自Splunk的JSON数据，则可以节省您的时间:)

http://plnkr.co/edit/Nl47Hz5Cnj1jvUT3DTBt?p=preview 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. 我正在尝试从Splunk获取JSON响应以适合highchart，但是我在格式化数据时确实遇到了问题。

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. 我确实是AngularJS的忠实拥护者，但我有些之以鼻，并希望一些聪明的人能对我有所帮助。

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: 来自$ 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>

Answer 1

您应该使用Array＃reduce操作在$ http服务的视图上重组检索到的数据，以将结果聚合到所需的结构中。

Answer 2

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));

Answer 3

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 . 这是一个普通的JavaScript（ES5）解决方案，使利用forEach和Object.keys因此它在IE8不能少，如果你没有填充工具 。

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 : 在此步骤中， result包含一张提供您的数据的地图，如下所示：

{
    '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 : 如果要在数据模型中包含{name: '...', data: [...]}对象的数组，请执行以下补充步骤：

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]
}];

在$ http.get之后使用AngularJS重建JSON

问题描述

3 个解决方案

解决方案1
0 2015-03-20 20:15:42

解决方案2
0 已采纳 2015-03-20 23:02:18

解决方案3
0 2015-03-21 00:05:31

在$ http.get之后使用AngularJS重建JSON

问题描述

3 个解决方案

解决方案1 0 2015-03-20 20:15:42

解决方案2 0 已采纳 2015-03-20 23:02:18

解决方案3 0 2015-03-21 00:05:31

解决方案1
0 2015-03-20 20:15:42

解决方案2
0 已采纳 2015-03-20 23:02:18

解决方案3
0 2015-03-21 00:05:31