javascript - Convert JSON to HTML: Uncaught TypeError: json.forEach is not a function - Stack Overflow

admin管理员组

文章数量:1292041

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("/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);
    });
  });
});

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

• javascript
• jquery
• json

Share Improve this question Follow edited Aug 9, 2016 at 22:45 nateyolles 1,92155 gold badges1818 silver badges2323 bronze badges asked Aug 9, 2016 at 20:42 KATKAT 5311 gold badge22 silver badges88 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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];
    ...
});

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./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>

$.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.

本文标签： javascriptConvert JSON to HTML Uncaught TypeError jsonforEach is not a functionStack Overflow