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数组中的每个对象添加一个新帖子，并使用正确的类。您可以更改createElements函数的最后一行，将其附加到与正文不同的元素。

将数据从JSON插入到html元素

1 个答案: