无法读取未定义的属性“toLowerCase”（Angularjs/JavaScript/Json）

Question

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

无法读取未定义的属性“toLowerCase”

当我手动编写 JSON 数据时，它工作得很好。 有人遇到过这个错误，为什么会这样？

编辑：另外我希望函数在点击时起作用，当我不希望它加载时，我也使用来自listData 的数据，所以我知道它已加载

控制器

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);

 }

Answer 2

这是您在点击元素时更新的代码：

jQuery("#a-div-to-click").on("click", function() {
    var self = this; 
    self.listData = [];
    $http.get('/myList').success(function (data) {
            self.listData = data;
            console.log(data);
            self.myFunc();
       }).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);
    }

});

V2) 数据在“onload”阶段加载，过程在“onclick”阶段完成：

app.controller('yourController', function ($scope, $http) {

    $scope.fetchData = funcion(onSuccess) {
        $http.get('/myList').success(function (data) {
                $scope.aDivlistData = data;
                console.log(data);
                if (onSuccess != null) {
                    onSuccess();
                }
           }).error(function (data) {
                console.log('Error: ' + data);
           });
        }
    }();

    $scope.onADivClicked = function() {
        if ($scope.aDivlistData == null) {
            $scope.fetchData($scope.populateMap);
        } else {
            $scope.populateMap();
        }

    };

    $scope.populateMap = function() {
        var map = $scope.aDivlistData.reduce(function (p, c) {
                p.set(c.name.toLowerCase(), c.surname);
                return p;
        }, new Map());

        console.log(map);
    }
}
//html part:
//<div id="a-div-to-click" ng-click="onADivClicked()">A Div</a>

Answer 3

只需查看您的代码即可。看起来“c.name”是未定义的。也许您可以打印出该变量并查看其中的内容

Answer 4

c.name 对于您的 listData 中的某些项目未定义。签出您从服务器接收的 JSON，而不是伪造的。

注意：$http.get 是异步的。 将self.myFunc = ... 放入$http.get 的成功处理程序中假设给出正确的行为。您可以查看 Understanding Asynchronous Code in Layman's terms 以了解异步是如何工作的。

祝你好运！ :)