如何在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对象的列表

回答

相关问题