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

Question

更新資料

以下鏈接提供了具有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因此它在IE8不能少，如果你沒有填充工具 。

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

在$ 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