TypeError: data.forEach is not a function

This is my code: I get the error that for each does not work on the data variable. However, when I log data to the console, I get [{"model": "app.mdl", "pk": 1, "fields": {"name": "test", "rank": 1}}]

This is my code:

$.ajax({ url: "some_url/", type: "GET", dataType: "json", success: function(data){ console.log(data); data.forEach(function(element){ console.log(element); }); } }); 

I get the error that for each does not work on the data variable. However, when I log data to the console, I get

[{"model": "app.mdl", "pk": 1, "fields": {"name": "test", "rank": 1}}]

This is clearly an array and iterable, so I don't get what exactly is wrong.

EDIT: data is returned via JsonResponse in Django.

2

6 Answers

I believe data is a JSON string. Since forEach() is a array function and you are trying to implement it on the JSON string it throws the error:

"Uncaught TypeError: data.forEach is not a function"

You have to parse the data with JSON.parse() before using forEach():

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.

data = JSON.parse(data); 

Demo:

var data = JSON.stringify([{"model": "app.mdl", "pk": 1, "fields": {"name": "test", "rank": 1}}]); data = JSON.parse(data); data.forEach(function(element){ console.log(element); });

So the success should be:

success: function(data){ data = JSON.parse(data); console.log(data); data.forEach(function(element){ console.log(element); }); } 

just check for either it is string or JSOn array

if(typeof(data) === "string"){data = JSON.parse(data)} data.forEach(function(element){ console.log(element); }); 

Just check if the data is JSON string.

data = "[{"model":"app.mdl","pk":1,"fields":{"name":"test","rank":1}}]" 

if yes, the you have to do JSON.parse(data) and do forEach on it.

It is a case where your data response looks like an array but it is a string. If you have access to the API you're connecting to you can ensure the response it sends out is an array but if not simply parsing the data response using JSON.parse() should do the trick.

Change your success function to this, the JSON.parse() function is required to iterate over the JSON string:

success: function(data){ data = JSON.parse(data); console.log(data); data.forEach(function(element){ console.log(element); }); 
$.ajax({ url: "some_url/", type: "GET", dataType: "json", success: function(data){ console.log(data); data.data.forEach(function(element){ console.log(element); }); } }); // Just add - data.data.foreach. 

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobGxqZ2qBcYGOrbCpnZWnv7C%2BjJ2YrZldm7yzscCcn2aho2K7sMCMmmSfrZ6Ywaq7zQ%3D%3D

 Share!