TypeError：无法读取角度应用程序中未定义的属性'0'

Question

我无法理解错误的来源，因为html端拿起像list[3].main.temp就好，但在第二个for generateList函数循环中我得到在$scope.list[i].main.temp它说

TypeError: Cannot read property '0' of undefined =\

错误右边的代码应该采取30个城市的名单，随机挑选10和显示其当前温度。

var WeatherApp = angular.module("WeatherApp", ["ngRoute", "ngResource"]). 
config(function ($routeProvider) { 
    $routeProvider. 
     when('/', { controller: ListCtrl, templateUrl: 'list.html' }). 
     otherwise({ redirectTo: '/' }); 
}); 

WeatherApp.factory('City', function ($resource) { 
return $resource('/api/City/:id', { id: '@id' }, {update: { method: 'PUT'}}); 
}); 

var ListCtrl = function ($scope, $location, City, $http) { 
$scope.city = City.query(); 

$scope.units = 'metric'; 
$scope.appId = ''; 
$scope.displayNum = 10; 
$scope.display = []; 
$scope.display.temp = []; 

$scope.generateList = function() { 
    $scope.exp = City.query(function (exp) { 
     shuffle(exp); 
     $scope.cityIdAr = []; 
     for (var i = 0; i < $scope.displayNum; ++i) { 
      $scope.display.push($scope.exp[i]); 
      $scope.cityIdAr.push($scope.exp[i].CityId); 
     }; 
     $scope.cityId = $scope.cityIdAr.join(); 
     $scope.getWeather(); 
     for (var i = 0; i < $scope.displayNum; ++i) { 
      $scope.display.temp.push($scope.list[i].main.temp); 
     }; 
    }); 
}; 

function shuffle(ob) { 
    for (var j, x, i = ob.length; i; j = Math.floor(Math.random() * i), x = ob[--i], ob[i] = ob[j], ob[j] = x); 
    return ob; 
}; 

$scope.getWeather = function() { 
    var url = 'http://api.openweathermap.org/data/2.5/group'; 
    $http.jsonp(url, { 
     params: { 
      id: $scope.cityId, 
      APPID: $scope.appId, 
      units: $scope.units, 
      callback : 'JSON_CALLBACK' 
     } 
    }).success(function (data, status, headers, config) { 
     $scope.data = data; 
     $scope.list = data.list; 
     }); 
}; 


$scope.generateList(); 
}; 

Answer 1

问题可能是$scope.list未定义，直到回调运行。您可以从$scope.getWeather返回承诺，并在$scope.generateList中解析它，然后在检索数据（在回调内）时执行for循环，例如

返回从$scope.getWeather一个承诺：

$scope.getWeather = function() { 
    ... 
    return $http.jsonp(...) 
} 

，然后在$scope.generateList：

... 
$scope.getWeather().success(function(data, status, headers, config) { 
    $scope.data = data; 
    $scope.list = data.list; 
    for (var i = 0; i < $scope.displayNum; ++i) { 
    $scope.display.temp.push($scope.list[i].main.temp); 
    }; 
} 

或东西沿着这些路线。

Answer 2

$ scope.display是列表中使用另一个变量

var WeatherApp = angular.module("WeatherApp", ["ngRoute", "ngResource"]). 
config(function ($routeProvider) { 
    $routeProvider. 
     when('/', { controller: ListCtrl, templateUrl: 'list.html' }). 
     otherwise({ redirectTo: '/' }); 
}); 

WeatherApp.factory('City', function ($resource) { 
return $resource('/api/City/:id', { id: '@id' }, {update: { method: 'PUT'}}); 
}); 

var ListCtrl = function ($scope, $location, City, $http) { 
$scope.city = City.query(); 

$scope.units = 'metric'; 
$scope.appId = ''; 
$scope.displayNum = 10; 
$scope.display = []; 
$scope.temp = []; 

$scope.generateList = function() { 
    $scope.exp = City.query(function (exp) { 
     shuffle(exp); 
     $scope.cityIdAr = []; 
     for (var i = 0; i < $scope.displayNum; ++i) { 
      $scope.display.push($scope.exp[i]); 
      $scope.cityIdAr.push($scope.exp[i].CityId); 
     }; 
     $scope.cityId = $scope.cityIdAr.join(); 
     $scope.getWeather(); 
     for (var i = 0; i < $scope.displayNum; ++i) { 
      $scope.temp.push($scope.list[i].main.temp); 
     }; 
    }); 
}; 

function shuffle(ob) { 
    for (var j, x, i = ob.length; i; j = Math.floor(Math.random() * i), x = ob[--i], ob[i] = ob[j], ob[j] = x); 
    return ob; 
}; 

$scope.getWeather = function() { 
    var url = 'http://api.openweathermap.org/data/2.5/group'; 
    $http.jsonp(url, { 
     params: { 
      id: $scope.cityId, 
      APPID: $scope.appId, 
      units: $scope.units, 
      callback : 'JSON_CALLBACK' 
     } 
    }).success(function (data, status, headers, config) { 
     $scope.data = data; 
     $scope.list = data.list; 
     }); 
}; 


$scope.generateList(); 
};