我期待这样的前景:与输出相关的图像
我想知道的是我如何创建这个输出，而不必使用纯JavaScript和JSON一次又一次地编写<p>，没有任何JS库。
JSON数据如下所示:
[{"id":1,"first_name":"David","food":"Pizza","age":"24"},
{"id":2,"first_name":"Jack","food":"Hamburger","age":"22"},
{"id":3,"first_name":"Harrison","food":"Sweets","age":"8"},.....
我的HTML正文是这样的
<body>
</div class="content">
<center>
<p><B>People and their Foods</B></p>
</center>
</div>
</body>
请帮助我，因为我对这个代码世界很陌生。
你可以遍历你的数据，并动态地创建元素，每次迭代，并将它们分配给主/根div。
// javascript
// pure javascript
// function to render data
function renderData (data) {
var root = document.getElementById("root");
for(var i =0; i<data.length; i++){
// here you can also create inner loop as well. but following is easier for you.
var div = document.createElement("div");
var para1 = document.createElement("P");
para1.innerText = "name:" + data[i].first_name;
div.appendChild(para1);
var para2 = document.createElement("P");
para2.innerText = "food:" + data[i].food;
div.appendChild(para2);
var para3 = document.createElement("P");
para3.innerText = "age:" + data[i].age;
div.appendChild(para3);
root.appendChild(div);
}
}
// load your json data and then call renderData function
var httpRequest = new XMLHttpRequest(); // asynchronous request
httpRequest.open("GET", "local/path/file.json", true);
httpRequest.send();
httpRequest.addEventListener("readystatechange", function() {
if (this.readyState === this.DONE) {
// when the request has completed
var object = JSON.parse(this.response);
// assuming that in json file data is an attribute
renderData(object.data);
}
});<!-- html part -->
<body>
<div class="content">
<center>
<p><b>People and their Foods</b></p>
</center>
<!-- == i have added one div with id root == -->
<div id="root"></div>
</div>
</body>