Cannot read the 'toLowerCase' property from undefined (Angularjs / JavaScript / Json)

Question

I create an Angular / Express application, load data using a controller and try to work with data in a function, but I get an error in the console

Unable to read property 'toLowerCase' undefined

When I manually write JSON data, it works fine. Someone had this error and why is this happening?

Edit: I also want the function to work on click when I want it not to load, I also use data from listData , so I know that it is loaded

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 is an asynchronous function

You can name your function, which turns the data into lowercase letters in the .success your http.get . So you know that the data has arrived. Now you can execute this function too soon, which means that you do not yet have data in your list.

If you try to run toLowerCase () in your data before you actually retrieve the data, you will get this error. This is one of the things you learn when dealing with web requests.

For example, writing your code like this will work.

  $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

Here is your updated code when clicking an element:

 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) Data is loaded in the onload phase and the process is executed in the onclick phase:

 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

Just look at your code. It appears that "c.name" is undefined. Maybe you can print this variable and see what is in it

Answer 4

c.name is undefined for some item in your listData . Place a JSON order that you receive from the server, not a fake one .

NOTE : $ http.get is asynchronous. Putting self.myFunc = ... in the success handler of $ http.get , suppose to give the correct behavior. You can take a look at Understanding Asynchronous Code in Layman Terms to find out how async works.

Good luck! :)