Question

更新

以下链接提供了Highchart-ng和JSON重建解决方案的工作演示。如果您尝试在高图中使用Splunk的JSON数据，这将节省您的一天：）

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

-

我正在尝试从Splunk获得JSON响应以适应高图，但我确实存在正确的数据形成问题。

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

以下是使用forEach和Object.keys的简单Javascript（ES5）解决方案，因此在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] }];

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

3 个答案: