Question

我有json文件，我想使用angularjs 1.6从它获取数据，我在控制器中写了一些代码。我想在控制台中理清对象的属性名称，如下所示：

['web-desktop','android','ios']

它返回未定义值数组的问题，并想弄明白。

有json文件“data.json”：

[
  {
    "platform": "web-desktop",
    "cdn": 4.3673292887e+10,
    "p2p": 5.667683381e+09,
    "total": 4.9340976268e+10,
    "upload": 5.774321084e+09,
    "percentage": 12,
    "viewers": 1,
    "maxViewers": 10,
    "averageViewers": 1.5725853094274147,
    "trafficPercentage": 69.49888073943228,
    "live": "unknown"
  },
  {
    "platform": "android",
    "cdn": 1.7035777808e+10,
    "p2p": 1.526916976e+09,
    "total": 1.8562694784e+10,
    "upload": 2.753179184e+09,
    "percentage": 9,
    "viewers": 1,
    "maxViewers": 12,
    "averageViewers": 1.416065911431514,
    "trafficPercentage": 26.14635154335973,
    "live": "unknown"
  },
  {
    "platform": "ios",
    "cdn": 2.994960132e+09,
    "p2p": 9.6722616e+07,
    "total": 3.091682748e+09,
    "upload": 3.3788984e+07,
    "percentage": 4,
    "viewers": 1,
    "maxViewers": 3,
    "averageViewers": 1.152542372881356,
    "trafficPercentage": 4.354767717207995,
    "live": "unknown"
  }
]

这是我的控制器：

'use strict';
var app= angular.module('app');
app.controller('MainController',['$scope', '$http', MainController]);

function MainController ($scope, $http) {

    // REQUEST OPTIONS USING GET METHOD.
    var request = {
        method: 'get',
        url: 'data.json',
        dataType: 'json',
        contentType: "application/json"
    };

    $scope.arrSeries = new Array;

    $http(request)
        .then(function onSuccess(jsonData) {
            angular.forEach(jsonData, function (item) {
                $scope.arrSeries.push(item.platform);
            });

            console.log($scope.arrSeries);


    }).catch(function onError(request) {
        console.log("not found");
    });
}

它在控制台中返回：

(6) [undefined, undefined, undefined, undefined, undefined, undefined]

诀窍在哪里？

Answer 1

您需要直接遍历jsonData.data而不是jsonData中的项目，如下所示：

$http(request)
    .then(function onSuccess(jsonData) {
        angular.forEach(jsonData.data, function (item) {
            $scope.arrSeries.push(item.platform);
        });

这是因为jsonData是返回的响应对象，如下所示：

response = {
    config: {method: "GET", transformRequest: Array(1), transformResponse: Array(1), paramSerializer: ƒ, jsonpCallbackParam: "callback", …},
    data: (3) [{…}, {…}, {…}],
    headers: ƒ (d),
    status: 200,
    statusText: "OK",
    xhrStatus: "complete"
}

因此，如果您直接循环回复，那么您将尝试从每个项目中获取platform 6次（这不是那里）。因此你得到的结果。

您的请求返回的数据位于response.data

response = {
    ...
    data: (3) [{…}, {…}, {…}],
    ...
}

希望有所帮助。

从json文件angularjs中读取

1 个答案: