將JSON轉換爲HTML：未捕獲TypeError：json.forEach不是函數

我想將JSON轉換爲HTML以在網站上顯示它。我GOOGLE了，並且當json是一個字符串，並且首先我需要解析時發生此錯誤。但是當我使用JSON.parse時，控制檯說它已經是一個對象（Unexpected token o in JSON at position 1）。將JSON轉換爲HTML：未捕獲TypeError：json.forEach不是函數

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

來源

2016-08-09 KAT

'json'是一個對象，而不是一個數組 - 沒有'上它forEach'方法。 – vlaz

json是一個對象，而不是一個數組。您只能在陣列上使用forEach。

正如你已經做了，你可以遍歷對象的關鍵是這樣的：

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

來源

2016-08-09 20:47:08 Timo

$.getJson已經轉換一個JSON對象轉換爲JavaScript對象，這樣你就不會需要再次解析它。

但是，您的問題始於forEach，這是一個Array方法，而不是Object方法，因此它不適用於您的用例。

var jsonKeys = Object.keys(json); jsonKeys.forEach(...)將工作，因爲Object.keys返回一個對象鍵數組。

來源

2016-08-09 20:50:19 vileRaisin

除了其他人所說的話，看起來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>

來源

2016-08-09 20:50:30 Will

我正在研究同樣的問題，而且這段代碼工作得很好。你能解釋你是如何得出答案的嗎？ – ChrisR

我抓住了問題中的URL並將其放入瀏覽器中以查看返回的JSON。 'http：// quotes.rest/qod.json' 如果你無論如何都不能這樣做，可以使用'console.dir（）'將響應轉儲到控制檯中，這樣你就可以看到對象的外觀。 – Will

將JSON轉換爲HTML：未捕獲TypeError：json.forEach不是函數

回答

相關問題