Convert JSON to HTML: Uncaught TypeError: json.forEach is not a function

Question

I want to convert JSON to HTML to display it on website. I've googled, and this error occurs when when json is a string, and first I need to parse. But when I use JSON.parse, the console says it is already an object (Unexpected token o in JSON at position 1).

$(document).ready(function() {
  $("#getMessage").on("click", function() {  
    $.getJSON("http://quotes.rest/qod.json", function(json) {
      var html = "";

      json.forEach(function(val) {
        var keys = Object.keys(val);

        html += "<div class = 'blabla'>";

        keys.forEach(function(key) {
          html += "<b>" + key + "</b>: " + val[key] + "<br>";
        });

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

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

json is an object, not an array - there is no forEach method on it. — VLAZ
– VLAZ, Commented Aug 9, 2016 at 20:46

TimoStaudinger · Accepted Answer · 2016-08-09 20:47:08Z

6

json is an object, not an array. You can use forEach only on arrays.

As you have done already, you can iterate over the object's keys like this:

Object.keys(json).forEach(function(key) {
    var value = json[key];
    ...
});

answered Aug 9, 2016 at 20:47

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

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

Comments

Will · Accepted Answer · 2016-08-09 20:50:30Z

2

In addition to what everyone else said, it appears that the JSON response does not look like you think it does.

var json = {
    "success": {
        "total": 1
    },
    "contents": {
        "quotes": [{
            "quote": "It's not whether you get knocked down, it...s whether you get up.",
            "length": "65",
            "author": "Vince Lombardi",
            "tags": [
                "failure",
                "inspire",
                "learning-from-failure"
            ],
            "category": "inspire",
            "date": "2016-08-09",
            "title": "Inspiring Quote of the day",
            "background": "https://theysaidso.com/img/bgs/man_on_the_mountain.jpg",
            "id": "06Qdox8w6U3U1CGlLqRwFAeF"
        }]
    }
};

var messageEl = document.querySelector('.message');
messageEl.innerText = json.contents.quotes[0].quote;

<div class="message"></div>

answered Aug 9, 2016 at 20:50

Will

3,2411 gold badge20 silver badges17 bronze badges

2 Comments

ChrisR Over a year ago

I am working on this same exact problem and this code works great. Can you explain how you came up with the answer?

Will Over a year ago

I grabbed the URL that was in the question and plopped it into a browser to see what JSON gets returned. http://quotes.rest/qod.json If you can't do that for whatever reason, use console.dir() to dump the response into the console so you can see what the object looks like.

vileRaisin · Accepted Answer · 2016-08-09 20:50:19Z

1

$.getJson already transforms a JSON object into a javascript object, so you would not need to parse it again.

However, your problem starts with forEach, which is an Array method, not an Object method, therefor it will not work in your use case.

var jsonKeys = Object.keys(json); jsonKeys.forEach(...) will work, as Object.keys returns an array of Object keys.

answered Aug 9, 2016 at 20:50

vileRaisin

1,24210 silver badges6 bronze badges

Collectives™ on Stack Overflow

Convert JSON to HTML: Uncaught TypeError: json.forEach is not a function

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related