Why am I getting an error, "ReferenceError: categories is not defined" in AngularJS?
Why am I getting an error, "ReferenceError: categories is not defined" in AngularJS?
在我的理解中,$scope.categories 已经被定义了。那为什么我会收到此错误并且无法访问 Json 文件中的数据?
这是我的控制器:
(function(){
app.controller('productsCtrl', ['$scope','$cookies', '$http', function($scope,$cookies,$http){
$http.get("controllers/data.json").then(function (response) {
$scope.categories = response.data;
});
$scope.specials = [categories[0].laptops[1], categories[1].accessories[0]];
}]);
})();
这是我的 Json 文件:
[
{
"laptops": [
{
"name": "Asus Laptop",
"price": 300
},
{
"name": "HP Notebook",
"price": 200
}
]
},
{
"accessories": [
{
"name": "WD Hard Drive",
"price": 100
},
{
"name": "WD Blue SSD",
"price": 700
}
]
}
]
您已将响应数据分配到 $scope.categories
,您需要使用 $scope.categories
而不是 categories
,并且您应该在 http 调用完成后添加到 $scope.specials
,例如
(function(){
app.controller('productsCtrl', ['$scope','$cookies', '$http', function($scope,$cookies,$http){
$scope.specials = [];
$http.get("controllers/data.json").then(function (response) {
$scope.categories = response.data;
$scope.specials.push($scope.categories[0].laptops[1]);
$scope.specials.push($scope.categories[1]. accessories[0]);
});
}]);
})();
这里实际上存在一些问题。首先是你永远不会定义一个名为类别的变量,你有一个名为 $scope 对象的 属性,所以你需要访问 $scope.categories
或 response.data
直接设置它。
其次,您遇到了竞争条件问题。您正在尝试访问 promise 之外的类别的值,这意味着可能在 get 请求返回任何数据之前。当您像现在这样使用 get().then()
时,请求之后的代码不会在 运行s 之前等待请求完成,所以先 运行s 更快。因为两个操作运行ning一个是访问外部端点,另一个是本地javascript代码,所以流程几乎可以保证是这样的:
- 向“controllers/data.json”发送获取请求
- 设置 $scope.specials - 导致你的未定义错误
- 在获取请求承诺解决时设置 $scope.categories
您需要访问 promise 中的类别,以保证在您尝试访问它时它确实已被定义:
$http.get("controllers/data.json").then(function (response) {
$scope.categories = response.data;
$scope.specials = [$scope.categories[0].laptops[1], $scope.categories[1].accessories[0]];
});
像这样对索引进行硬编码通常也是一个坏主意,如果数据将您 运行 更改为可能的索引越界错误。
在我的理解中,$scope.categories 已经被定义了。那为什么我会收到此错误并且无法访问 Json 文件中的数据?
这是我的控制器:
(function(){
app.controller('productsCtrl', ['$scope','$cookies', '$http', function($scope,$cookies,$http){
$http.get("controllers/data.json").then(function (response) {
$scope.categories = response.data;
});
$scope.specials = [categories[0].laptops[1], categories[1].accessories[0]];
}]);
})();
这是我的 Json 文件:
[
{
"laptops": [
{
"name": "Asus Laptop",
"price": 300
},
{
"name": "HP Notebook",
"price": 200
}
]
},
{
"accessories": [
{
"name": "WD Hard Drive",
"price": 100
},
{
"name": "WD Blue SSD",
"price": 700
}
]
}
]
您已将响应数据分配到 $scope.categories
,您需要使用 $scope.categories
而不是 categories
,并且您应该在 http 调用完成后添加到 $scope.specials
,例如
(function(){
app.controller('productsCtrl', ['$scope','$cookies', '$http', function($scope,$cookies,$http){
$scope.specials = [];
$http.get("controllers/data.json").then(function (response) {
$scope.categories = response.data;
$scope.specials.push($scope.categories[0].laptops[1]);
$scope.specials.push($scope.categories[1]. accessories[0]);
});
}]);
})();
这里实际上存在一些问题。首先是你永远不会定义一个名为类别的变量,你有一个名为 $scope 对象的 属性,所以你需要访问 $scope.categories
或 response.data
直接设置它。
其次,您遇到了竞争条件问题。您正在尝试访问 promise 之外的类别的值,这意味着可能在 get 请求返回任何数据之前。当您像现在这样使用 get().then()
时,请求之后的代码不会在 运行s 之前等待请求完成,所以先 运行s 更快。因为两个操作运行ning一个是访问外部端点,另一个是本地javascript代码,所以流程几乎可以保证是这样的:
- 向“controllers/data.json”发送获取请求
- 设置 $scope.specials - 导致你的未定义错误
- 在获取请求承诺解决时设置 $scope.categories
您需要访问 promise 中的类别,以保证在您尝试访问它时它确实已被定义:
$http.get("controllers/data.json").then(function (response) {
$scope.categories = response.data;
$scope.specials = [$scope.categories[0].laptops[1], $scope.categories[1].accessories[0]];
});
像这样对索引进行硬编码通常也是一个坏主意,如果数据将您 运行 更改为可能的索引越界错误。