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

Question

更新

以下 link 提供了 Highchart-ng 和 JSON 重建解决方案的工作演示。如果您尝试在 highchart 中使用来自 Splunk 的 JSON 数据，这将节省您的时间:)

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

--

我正在尝试从 Splunk 获得 JSON 响应以适应 highchart，但我在正确格式化数据方面遇到了实际问题。

我是 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>

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

这是一个普通的 Javascript (ES5) 解决方案，它使用了 forEach 和 Object.keys 因此如果你没有 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 包含一个 map，根据您的数据，它看起来像这样 :

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

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

Rebuild JSON after $http.get with AngularJS

json

splunk

highcharts

angularjs