时间戳

首页 > 解决方案 > 使用 JavaScript 将 JSON 数据发布到 HTML

javascript - 使用 JavaScript 将 JSON 数据发布到 HTML

问题描述

我排除了这样的前景： 与输出相关的图像

我想知道的是如何在<p>没有任何 JS 库的情况下使用纯 JavaScript 和 JSON 一次又一次地编写此输出。

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>

请帮助我，因为我是这个代码世界的新手。

标签： javascripthtmlarraysjson

解决方案

您可以遍历数据并在每次迭代时动态创建元素并将它们分配给主/根 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>

推荐阅读