如何在HTML頁面上顯示JSON對象的列表

注意：需要在不使用jQuery或任何其他開放源代碼的情況下實現此目的。如何在HTML頁面上顯示JSON對象的列表

這裏是我有什麼

HTML：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Model</title> 
    <script src="js.js"></script> 
</head> 
<body> 
<h1>Browse all our products below:</h1> 
Name: <span id="name"></span><br> 
Desc: <span id="desc"></span><br> 
Cost: <span id="cost"></span><br> 
Stock: <span id="stock"></span> 
</body> 
</html>

js.js低於

var getProducts = function(){ 

console.log("Getting Products..."); 
var success = function() { 
      var product = JSON.parse(xhr.responseText); 
      console.log(product); 
      document.getElementById("name").innerHTML = product.name; 
      document.getElementById("desc").innerHTML = product.desc; 
      document.getElementById("cost").innerHTML = product.cost; 
      document.getElementById("stock").innerHTML = product.stock; 
    } 
}; 

xhr = new XMLHttpRequest(); 
xhr.open("GET", "back.php"); 
xhr.addEventListener("load", success); 
xhr.send(); 
}; 

window.addEventListener("load", getProducts);

back.php從數據庫返回以下。他們已經json_encoded：

{"name":"TESTPRODUCT","desc":"TESTIN12356879CEWBLABHDSB","cost":"123.45","stock":"6"} 
{"name":"soot","desc":"soooottty black","cost":"980.00","stock":"10"} 
{"name":"baby","desc":"chucky doll","cost":"7.92","stock":"34"} 
{"name":"bob","desc":"fydrtsfxgcvnb","cost":"3546.00","stock":"978"} 
{"name":"bolly","desc":"ball","cost":"77.00","stock":"89"}

我需要顯示這些對象到HTML頁面。我知道我需要實現一個for循環，無論我嘗試什麼，都會出現JSON的解析錯誤。

SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at 
line 1 column 86 of the JSON data 
var product = JSON.parse(xhr.responseText);

如果有人能幫助我瞭解如何將所有JSON對象顯示在html頁面上，我們將非常感激。

來源

2015-04-02 barthola

驗證您的JSON第一[JSONLint（http://jsonlint.com/） – 2015-04-02 22:10:25

您的JSON無效。您需要將這些對象放在數組中，並用逗號分隔它們。

[{"name":"TESTPRODUCT","desc":"TESTIN12356879CEWBLABHDSB","cost":"123.45","stock":"6"}, 
{"name":"soot","desc":"soooottty black","cost":"980.00","stock":"10"}, 
{"name":"baby","desc":"chucky doll","cost":"7.92","stock":"34"}, 
{"name":"bob","desc":"fydrtsfxgcvnb","cost":"3546.00","stock":"978"}, 
{"name":"bolly","desc":"ball","cost":"77.00","stock":"89"}]

來源

2015-04-02 22:11:41 BenR

謝謝！所以我會在解析之前或之後放置由[]括號包圍的xhr.responsetext？如何去返回數組中的JSON對象？ – barthola 2015-04-02 23:04:35

下面是使用開源項目jinqJs 另外的例子中使用jQuery的例子。

Fiddle Example

//data can also be a string to a url that returns JSON 
jinqJs().from(data).select(function(row) { 
    $('#items') 
     .append($("<option></option>") 
     .attr("value",row.nam) 
     .text(row.desc)); 
} 
);

來源

2015-04-02 23:23:34 NYTom

如何在HTML頁面上顯示JSON對象的列表

回答

相關問題