[英]Why am I getting an error, "ReferenceError: categories is not defined" in AngularJS?
In my understanding, $scope.categories is already defined.在我的理解中, $scope.categories 已经定义好了。 Then why am I getting this error and not able to access data from the Json file?那为什么我会收到此错误并且无法访问 Json 文件中的数据?
Here is my controller:这是我的控制器:
(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]];
}]);
})();
Here is my Json file:这是我的 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
}
]
}
]
You have assigned response data into $scope.categories
, you need to use $scope.categories
instead of categories
and also you should add into $scope.specials
once http call completed like您已将响应数据分配到$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]);
});
}]);
})();
There's actually a few issues here.这里其实有几个问题。 First is you never define a variable named categories, you have a property of the $scope object named that, so you need to access $scope.categories
or the response.data
setting it directly.首先是你从来没有定义一个名为类别的变量,你有一个名为 $scope 对象的属性,所以你需要访问$scope.categories
或直接设置它的response.data
。
Second, you have a race condition issue.其次,你有一个竞争条件问题。 You are trying to access the values of categories outside the promise, meaning potentially before the get request has returned any data.您正在尝试访问承诺之外的类别值,这意味着可能在 get 请求返回任何数据之前。 When you use get().then()
like you are, the code after the request doesn't wait for the request to finish before it runs, so whatever is faster runs first.当你像你一样使用get().then()
,请求之后的代码不会等待请求完成后再运行,所以先运行速度更快的代码。 Because one of the two operations running is accessing an external endpoint and the other is local javascript code, the flow is almost guaranteed to be this:因为正在运行的两个操作之一是访问外部端点,另一个是本地 javascript 代码,所以几乎可以保证流程是这样的:
You need to access the categories inside the promise to guarantee that it actually has been defined at the point you are trying to access it:您需要访问 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]];
});
It's also generally a bad idea to hard code indexes like this, if the data changes you run into a possible index out of bounds error.像这样对索引进行硬编码通常也是一个坏主意,如果数据发生变化,您可能会遇到索引越界错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.