TypeError: data.forEach is not a function

user_6092420 0
Viewed 107784

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.

django html jquery javascript
5 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);
    });
}
user_74613810

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

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.

user_47291130

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.

user_79054370

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);
        });
user_44019800
Related