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(); 
};