使用 JavaScript 将 JSON 数据发布到 HTML答案

【问题标题】：Publishing JSON data to HTML using JavaScript使用 JavaScript 将 JSON 数据发布到 HTML
【发布时间】：2021-12-04 18:18:41
【问题描述】：

我排除了这样的前景： Image relating to output

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

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>

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

【问题讨论】：

标签： javascript html arrays json

【解决方案1】：

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

【讨论】：

我的数据太大，在data.json文件里，怎么调用？
控制台也提供错误'root is null'
请注意我在 HTML 中添加了一个 id 为 root 的 div。

【解决方案2】：

尝试如下 sn-p:

const 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"},]

const content = document.querySelector('.content')

json.forEach(j => {
  let div = document.createElement('div')
  div.id = j.id
  div.style = "margin-bottom: 2em;"
  content.appendChild(div)
  const divid = content.querySelector(`#${CSS.escape(j.id)}`)
  for(let key in j) {
    if(key !== 'id') {
      let p = document.createElement('p')
      let title = ''
      key === 'first_name' ? title = 'name' : title = key
      p.innerText = title.charAt(0).toUpperCase() + title.slice(1) + ': ' + j[key]
      divid.appendChild(p)
    }
  }
})

<body>
  <div class="content">
    <h3>People and their Foods</h3>
    
  </div>
</body>

【讨论】：