Using JSON file in HTML: Uncaught TypeError: data.forEach is not a function

Question

I've browsed the web/docs and cannot find out why this is not working.

I am trying to insert data (quotes) from a JSON file: {

"quotesArray":[{
    "personName": "Albert Einstein",
    "quote": "Look deep into nature, and then you will understand everything better."
},
{
    "personName": "Stephen Hawking",
    "quote": "Look deep into nature, and then you will understand everything better."
},
{
    "personName": "Confucius",
    "quote": "Life is really simple, but we insist on making it complicated."
}]}

Into a simple HTML div using the following JS:

 $(document).ready(function() {
   $("#realquote").on("click", function() {
    $.getJSON('/json/quotes.json', function(data) {
     var html = " ";
       data.forEach(function(val) {
        var keys = Object.keys(val);
          html += "<div class = 'text-output'>";
            keys.forEach(function(key){ 
                html += val[key];

            });
               html += "</div>"
         });


       $(".realquote").html(html);
    });
   });          
   });

But every time, I get the error :TypeError: data.forEach is not a function" and I cannot figure out why.

If anyone could push me in the right direction, it would be greatly appreciated!

Ram · Accepted Answer · 2016-06-29 15:58:23Z

5

The data is a regular object that doesn't have .forEach method. You should iterate through the quotesArray property of the object.

data.quotesArray.forEach(fn);

answered Jun 29, 2016 at 15:58

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mars Cheng · Accepted Answer · 2016-06-29 16:01:41Z

1

You need to use data.quotesArray to actually access the array that you want to iterate through.

The data in the callback holds the object returned from your JSON file. Since plain Javascript object does not have .forEach method you will get an error.

answered Jun 29, 2016 at 16:01

Mars Cheng

313 bronze badges

Comments

Praveen N · Accepted Answer · 2016-07-08 04:37:37Z

1

Use data.quotesArray.forEach(.. instead of data.forEach(..

http://js.do/code/100647

If you want iterate through data then you can use Object

Object.keys(data).forEach(function (key)
{

....

});

edited Jul 8, 2016 at 4:37

answered Jun 29, 2016 at 16:21

Praveen N

1371 silver badge8 bronze badges

Collectives™ on Stack Overflow

Using JSON file in HTML: Uncaught TypeError: data.forEach is not a function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related