（Angular http$）：无法读取未定义的属性“长度”答案

【问题标题】：(Angular http$): Cannot read property 'length' of undefined（Angular http$）：无法读取未定义的属性“长度”
【发布时间】：2016-09-25 06:52:47
【问题描述】：

我正在开发一个应用程序来读取 JSON 文件。

目前我能够检索和读取 JSON 文件，但问题是何时选择 JSON 中的数据。

错误“无法读取未定义的属性‘长度’”

下面是我的代码。

Services.js

.factory("mainData", function($http, $log, $q) {
    var chartData;

    return {

        all: function() {
            var d = $q.defer();
            $http({ method: 'GET',
                url: 'http://localhost:8080/aZolla/getGlazCharts.do'})
                    .success(function (data, status, header, config) {
                         d.resolve(data);
                        })
                    .error(function (data, status, header, config) {
                        $log.warn(data, status, header, config);
            });

            chartData = d.promise;

            return d.promise;     
        },

       get: function(chartID) {
        for (var i = 0; i < chartData.length; i++) {
        if (chartData[i].id === parseInt(chartID)) {
          return chartData[i];
        }
      }
      return null;
    }
 };
});

Controller.js

.controller("ChartsListsCtrl", function($scope, mainData) {

    mainData.all().then(function(data){
    $scope.chartLists = data;
    }            
   )

.controller('ChartsCtrl', function($scope, $stateParams, mainData) {

  $scope.chart = mainData.get($stateParams.chartId);

})

【问题讨论】：

你同时加载两个控制器？这看起来像是一个异步问题。
在get函数执行过程中检查chartData是否包含预期的数据。

标签： angularjs json http

【解决方案1】：

试试这个

.controller("ChartsListsCtrl", function($scope, mainData) {

    mainData.all().then(function(data){
    $scope.chartLists = data;
    }            
   )

   .controller('ChartsCtrl', function($scope, $stateParams, mainData) {
      mainData.all().then(function(data){
       $scope.chart = mainData.get($stateParams.chartId);
      })
   })

您需要在调用get 之前加载all。在您的第一个控制器 all 调用发生。但这并不意味着在您的第二个控制器中它将可用，因为您的第二个控制器可能会与您的第一个控制器同时初始化，直到那时您的 all 调用可能还没有完成。

【讨论】：

【解决方案2】：

您应该将chartData 传递给您的get 函数。试试这个：

get: function(chartID, chartData) {
  for (var i = 0; i < chartData.length; i++) {
    if (chartData[i].id === parseInt(chartID)) {
      return chartData[i];
  }
}

在控制器中：

.controller('ChartsCtrl', function($scope, $stateParams, mainData) {
  mainData.all().then(function(data){
    $scope.chart = mainData.get($stateParams.chartId, data);
  });
})

【讨论】：

很高兴为您提供帮助。在使用$q 服务时要小心。你不应该在$http 请求中使用$q 服务。因为http请求自己返回promise。在这里查看我的问题：stackoverflow.com/questions/36631601/…