javascript - 无法读取未定义的属性 'toLowerCase' (Angularjs/JavaScript/Json)

Question

我正在构建 Angular/Express 应用程序，我使用 Controller 加载数据并尝试在函数中处理数据，但我在控制台中遇到错误

Cannot read property 'toLowerCase' of undefined

当我手动写入 JSON 数据时，它工作得很好。任何人都遇到过这个错误，为什么会发生？

编辑:我还希望函数在点击时起作用，当我不希望它加载时，我还使用 View 中的 listData 数据，所以我知道它已加载

Controller

var self = this; 
self.listData = [];

var self = this; 
self.listData = [];

$http.get('/myList')
.success(function (data) {
    self.listData = data;
    console.log(data);
})
.error(function (data) {
    console.log('Error: ' + data);
});

self.myFunc = function(){
    var map = self.listData.reduce(function (p, c) {
        p.set(c.name.toLowerCase(), c.surname);
        return p;
    }, new Map());

    console.log(...map);
}

Answer 1

HTTP.GET 是一个异步函数

您可以在 http.get 的 .success 中调用将数据转换为小写的函数。这样你就知道数据已经到达。现在您可能过早地执行此函数，这意味着您的列表中还没有数据。

如果您尝试对您的数据运行 toLowerCase()，在您实际检索数据之前您将收到此错误。这是您在处理 Web 请求时要学会处理的事情之一。

例如，像这样编写代码就可以了。

   $http.get('/myList')
           .success(function (data) {
                self.listData = data;
                myFunc(listData);
                console.log(data);
           })
           .error(function (data) {
                console.log('Error: ' + data);
           });

 }

 function myFunc(){

    var map = self.listData.reduce(function (p, c) {
                p.set(c.name.toLowerCase(), c.surname);
                return p;
           }, new Map());

           console.log(...map);

 }