将数据从 JSON 插入 html 元素

Question

我有包含 3 个对象的 JSON 文件：

[
  {
    "image": "assets/image.jpg",
    "title": "Text",
    "text": "Some text",
    "date": "23/11/2013"
  },
 ... 
]

还有 3 个 HTML 元素：

<div class="blog-post">
  <img src="" class="blog-image"/>
  <h2 class="blog-title"></h2>
  <p class="blog-text"></p>
  <div class="blog-date"></div>
</div>

我知道如何从 1 个对象获取数据到 1 个 html 元素：

((() => {
  const getJSON = (url, callback) => {
    const xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'json';
    xhr.onload = () => {
      const status = xhr.status;
      if (status === 200) {
        callback(null, xhr.response);
      } else {
        callback(status);
      }
    };
    xhr.send();
  };

  const blogTitle = document.querySelector('.blog-title');
  const blogText = document.querySelector('.blog-text');
  const blogDate = document.querySelector('.blog-date');
  const blogImage = document.querySelector('.blog-image');

  getJSON('/test-data.json', (err, data) => {
    if (err != null) {
      return false;
    } else {
      blogImage.src = data.image;
      blogTitle.innerText = data.title;
      blogText.innerText = data.text;
      blogDate.innerText = data.date;
    }
  });
}))();

但是我怎样才能使 json 文件中的所有对象循环并将数据插入到 html 元素中呢？

Answer 1

所以你的 JSON 文件会返回一个数组，我们可以像这样循环遍历数组：

getJSON('./test-data.json', (err, data) => {
  if (err != null) {
    return false;
  } else {
    data.forEach(obj => {
      createElements(obj);
    });
  }
});

那个createElements是我写的一个函数：

function createElements(obj) {
  const mainDiv = document.createElement('div');
  mainDiv.classList.add('blog-post');
  const img = document.createElement('img');
  img.classList.add('blog-image');
  img.src = obj['image'];
  const title = document.createElement('h2');
  title.classList.add('blog-title');
  title.innerHTML = obj['title'];
  const text = document.createElement('p');
  text.classList.add('blog-text');
  text.innerHTML = obj['text'];
  const date = document.createElement('div');
  date.classList.add('blog-date');
  date.innerHTML = obj['date'];
  mainDiv.appendChild(img);
  mainDiv.appendChild(title);
  mainDiv.appendChild(text);
  mainDiv.appendChild(date);
  document.querySelector('body').appendChild(mainDiv);
}

相当冗长，但这将为您的 JSON 数组中具有正确类的每个对象添加一个新帖子到 HTML 正文。您可以更改 createElements 函数的最后一行，以将其附加到与正文不同的元素。