Javascript TypeError:无法读取属性'；0'；在angular app中未定义的

我很难理解错误的来源，因为html端会拾取类似于

list[3].main.temp

的内容，但在generateList函数的第二个for循环中，我在

$scope.list[I].main.temp

上得到了错误，其中

TypeError:无法读取未定义的属性“0”=\

该代码将列出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();
};

var WeatherApp=angular.module（“WeatherApp”、[“ngRoute”、“ngResource”]）。
配置（函数（$routeProvider）{
$routeProvider。
when（'/'，{controller:ListCtrl，templateUrl:'list.html'}）。
否则（{重定向到：'/'}）；
});
WeatherApp.factory（'City'，函数（$resource）{
返回$resource（'/api/City/:id'，{id:'@id'}，{update:{method:'PUT'}}）；
});
var ListCtrl=function（$scope、$location、City、$http）{
$scope.city=city.query（）；
$scope.units='公制'；
$scope.appId=''；
$scope.displayNum=10；
$scope.display=[]；
$scope.display.temp=[]；
$scope.generateList=函数（）{
$scope.exp=City.query（函数（exp）{
洗牌（实验）；
$scope.cityIdAr=[]；
对于（变量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（）；
对于（变量i=0；i<$scope.displayNum；++i）{
$scope.display.temp.push（$scope.list[i].main.temp）；
};
});
};
函数洗牌（ob）{
对于（var j，x，i=ob.length；i；j=Math.floor（Math.random（）*i），x=ob[--i]，ob[i]=ob[j]，ob[j]=x）；
返回ob；
};
$scope.getWeather=函数（）{
var url='1〕http://api.openweathermap.org/data/2.5/group';
$http.jsonp（url{
参数：{
id:$scope.cityId，
APPID:$scope.APPID，
单位：$scope.units，
回调：“JSON_回调”
}
}).success（函数（数据、状态、标题、配置）{
$scope.data=数据；
$scope.list=data.list；
});
};
$scope.generateList（）；
};

问题可能是在运行回调之前，

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

。。。
$scope.getWeather（）.success（函数（数据、状态、标题、配置）{
$scope.data=数据；
$scope.list=data.list；
对于（变量i=0；i<$scope.displayNum；++i）{
$scope.display.temp.push（$scope.list[i].main.temp）；
};
}

---

或者类似的东西。

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

var WeatherApp=angular.module（“WeatherApp”、[“ngRoute”、“ngResource”]）。
配置（函数（$routeProvider）{
$routeProvider。
when（'/'，{controller:ListCtrl，templateUrl:'list.html'}）。
否则（{重定向到：'/'}）；
});
WeatherApp.factory（'City'，函数（$resource）{
返回$resource（'/api/City/:id'，{id:'@id'}，{update:{method:'PUT'}}）；
});
var ListCtrl=function（$scope、$location、City、$http）{
$scope.city=city.query（）；
$scope.units='公制'；
$scope.appId=''；
$scope.displayNum=10；
$scope.display=[]；
$scope.temp=[]；
$scope.generateList=函数（）{
$scope.exp=City.query（函数（exp）{
洗牌（实验）；
$scope.cityIdAr=[]；
对于（变量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（）；
对于（变量i=0；i<$scope.displayNum；++i）{
$scope.temp.push（$scope.list[i].main.temp）；
};
});
};
函数洗牌（ob）{
对于（var j，x，i=ob.length；i；j=Math.floor（Math.random（）*i），x=ob[--i]，ob[i]=ob[j]，ob[j]=x）；
返回ob；
};
$scope.getWeather=函数（）{
var url='1〕http://api.openweathermap.org/data/2.5/group';
$http.jsonp（url{
参数：{
id:$scope.cityId，
APPID:$scope.APPID，
单位：$scope.units，
回调：“JSON_回调”
}
}).success（函数（数据、状态、标题、配置）{
$scope.data=数据；
$scope.list=data.list；
});
};
$scope.generateList（）；
};

---

仍在学习这些东西我想我需要把目光转向承诺：）很高兴我能帮上忙。与承诺合作是相当直接的。你很快就会掌握窍门的。重要的是保持控制器的精简。尝试并利用服务进行数据检索。