为啥我在 AngularJS 中收到错误“ReferenceError:未定义类别”?

Posted

技术标签:

【中文标题】为啥我在 AngularJS 中收到错误“ReferenceError:未定义类别”?【英文标题】:Why am I getting an error, "ReferenceError: categories is not defined" in AngularJS?为什么我在 AngularJS 中收到错误“ReferenceError:未定义类别”? 【发布时间】:2021-12-12 00:14:24 【问题描述】:

据我了解,$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.specials = ... 开头的行上收到此错误,对吗?您在该行中引用的categories 标识符与$scope.categories 不同。其次,将值分配给$scope.categories 的代码行将在分配$scope.specials 的行之后执行。这是因为$http.get 是一个异步 进程。在使用 javascript 时,理解这一点非常重要。 您可能需要将分配$scope.specials 的行移到回调函数中,就在分配$scope.categories 的行下方。 我尝试将分配 $scope.specials 的行移到回调函数中,就在分配 $scope.categories 的行下方并遇到更多错误。 你解决了我提到的另一个问题吗?您指的是categories,但您可能指的是$scope.categories 谢谢,在您的帮助和其他回复的人的帮助下,我确实解决了这个问题。谢谢一百万。 【参考方案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]);
        ); 

        

    ]);

)(); 

【讨论】:

【参考方案2】:

这里实际上存在一些问题。首先是你永远不会定义一个名为 categories 的变量,你有一个名为 that 的 $scope 对象的属性,所以你需要直接访问 $scope.categoriesresponse.data 设置它。

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

    向“controllers/data.json”发送获取请求 设置 $scope.specials - 导致未定义的错误 get request promise 解决时设置 $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]];
); 

如果数据更改遇到可能的索引越界错误,那么硬编码这样的索引通常也是一个坏主意。

【讨论】:

感谢您的指点。但是,在我只需要访问大量项目中的几个特定项目的情况下,如何绕过硬编码索引? @MDube 对于你的 json 来说,这是一个非常尴尬的结构,而且它可能适合你的目的(这看起来像早期的大学工作)但你通常会在元素中搜索你想要的键大批。您在这里拥有它的方式需要您确切地知道 json 数组中的位置——这是您在查询端点时永远不会假设的。我不会让类别成为一个数组,而只是一个具有每个类别属性的对象,因此您只需以$scope.categories?.laptops?.[1] 的身份访问类别。尽你所能做到最好$scope.categories?.[0]?.laptops?.[1] 事实是我通过反复试验自学Angularjs,没有坚实的基础或任何适当的指导。 @MDube 您应该将数据视为来自数据库查询,即使我猜它来自您控制其内容的静态 json 文件。我建议删除最外面的数组,所以它是 laptops: [ , ], accessories: [ , ] 并编写一个快速函数,您可以在其中传递您需要的对象的名称和类型,通过数组返回正确的对象或 null 并将其调用为“HP notebook”和“WD 硬盘”。结果相同,但速度稍慢,但不假设知道对象中的位置。

以上是关于为啥我在 AngularJS 中收到错误“ReferenceError:未定义类别”?的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS - 为啥更改 url 地址时 $routeProvider 似乎不起作用并且我收到 404 错误

为啥我在 AngularJS 中的日期输入字段会抛出类型错误?

为啥我在 ProcessBuilder --Java 中收到 IllegalThreadStateException 错误?

为啥我在 python 中收到此错误? (httplib)

为啥我在 django 教程中收到此模板错误?

为啥我在角度请求中收到此错误? (CORS)