为什么我在 AngularJS 中收到错误“ReferenceError：类别未定义”？

Question

在我的理解中， $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
      }
    ]
  }
] 

Answer 1

您已将响应数据分配到$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]);
        }); 

        

    }]);

})(); 

Answer 2

这里其实有几个问题。 首先是你从来没有定义一个名为类别的变量，你有一个名为 $scope 对象的属性，所以你需要访问$scope.categories或直接设置它的response.data 。

其次，你有一个竞争条件问题。 您正在尝试访问承诺之外的类别值，这意味着可能在 get 请求返回任何数据之前。 当你像你一样使用get().then() ，请求之后的代码不会等待请求完成后再运行，所以先运行速度更快的代码。 因为正在运行的两个操作之一是访问外部端点，另一个是本地 javascript 代码，所以几乎可以保证流程是这样的：

1. 向“controllers/data.json”发送获取请求
2. 设置 $scope.specials - 导致您未定义的错误
3. 当获取请求承诺解决时设置 $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]];
}); 

像这样对索引进行硬编码通常也是一个坏主意，如果数据发生变化，您可能会遇到索引越界错误。