JSONをHTMLに変換：未知の型エラー：json.forEachは関数ではありません

Question

JSONをHTMLに変換してWebサイトに表示したいとします。私はグーグルで、このエラーは、jsonが文字列で、最初に解析する必要があるときに発生します。しかし、JSON.parseを使用すると、コンソールには既にオブジェクト（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); 
    }); 
    }); 
}); 

Answer 1

jsonはオブジェクトであり配列ではありません。 forEachは配列に対してのみ使用できます。

あなたは既に行っているとして、あなたはこのようなオブジェクトのキーを反復処理することができます。

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

Answer 2

$.getJsonすでにjavascriptオブジェクトにJSONオブジェクトを変換するので、あなたは再びそれを解析する必要はありません。

しかし、問題はforEachで始まります。これはObjectメソッドではなくArrayメソッドであるため、ユースケースでは機能しません。

var jsonKeys = Object.keys(json); jsonKeys.forEach(...)Object.keysは、オブジェクトキーの配列を返します。

Answer 3

他の人の言うことに加えて、JSONレスポンスは、あなたのように見えないようです。

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>