如何将 JSON 数据从 API 映射到 div答案

【问题标题】：How to map JSON Data from an API to a div如何将 JSON 数据从 API 映射到 div
【发布时间】：2020-03-08 00:33:34
【问题描述】：

我一直在开发一个应用程序，它从 API 获取数据，然后将它们整齐地放入卡片 div 中。我已经编写了用于执行请求并以 JSON 格式获取所有数据的代码（下图），但是我找不到保持代码清洁和管理结果的方法。

我要做的是为每个 JSON 对象创建一个名为 card 的 div（下图中有 50 个），然后在这些 div 中添加带有信息的 span 标签。

这是我当前的代码

  xhr.onreadystatechange = () => {
    if (xhr.readyState == 4) {
      results.style.opacity = 1
      let result = xhr.responseText
      result = JSON.parse(result)
      console.log(result)

【问题讨论】：

result.results.forEach(data => { /* create div */ }); 不太清楚你在这里问什么。此外，您可能希望使用 fetch() 而不是过时的 XMLHttpRequest。
好吧去试试
另外，不要想太多。只需编写有效的代码，不要浪费时间尝试从一开始就编写干净的代码。否则你永远不会完成任何事情:)

标签： javascript json api object ecmascript-6

【解决方案1】：

您可以迭代对象并创建 div 和 span。

// I expect your results in this variable. 
var result = {
  results: [{
    One: 'div',
    Two: 'span'
  }]
};




result.results.forEach(data => {
  var div = document.createElement('div');
  div.id = 'block';
  div.className = 'block';

  var span = document.createElement('span');
  span.className = 'block-2';

  div.appendChild(span);

  document.getElementsByTagName('body')[0].appendChild(div);
});

.block {
  height: 50px;
  width: 50px;
  border: 1px solid red;
}

.block-2 {
  height: 20px;
  width: 20px;
  border: 1px solid blue;
  position: absolute;
}

【讨论】：

【解决方案2】：

创建函数并将 JSON 数据传递给该函数，然后您需要为键名 results 迭代循环。然后使用数组对象的键名访问每个元素。下面是示例代码（不包括 css）。更多关于object

<body>
    <div id="container">

    </div>
</body>

<script>

xhr.onreadystatechange = () => {
    if (xhr.readyState == 4) {
    results.style.opacity = 1
    let result = xhr.responseText
    result = JSON.parse(result)
    loadDiv(result);
    }
}



function loadDiv(data){
    for(var x of data.results){

        var div = `<div class="cols">
        <a href="${x.url}">${x.mal_id}</a>
        <img src="${x.url}"/>
        </div>
        `;
        document.getElementById("container").insertAdjacentHTML("beforeend",div);

    }

}

【讨论】：