javascript - 如何在 JavaScript 中将 API 数据插入 HTML？

Question

我正在尝试使用 JavaScript 将 API 数据插入 html。我已经声明了一个空的 itemsArray，执行了一个从 API 获取数据并将该数据推送到 itemsArray 的函数。

现在我想映射 itemsArray，返回带有数据的 div 元素并使用 innerHTML 将其插入 HTML，但我的 itemsArray 是空的。有谁知道为什么会这样？

这是我的代码：

let itemsArray = [];

const fetchData = () => {
  fetch('http://localhost:3000/items')
    .then(response => {
      if (!response.ok) {
        throw Error(response.status)
      }
      return response.json();
    })
    .then(data => {
      data.items.map(item => {
        itemsArray.push(item);
      })
    })
    .catch(error => console.log(error))
}

fetchItems();

const itemsList = document.querySelector('#items-list');

let item = itemsArray.map(item => {
  return `
    <div class="price">
      ${item.price}
    </div>
  `;
}).join('');

itemsList.innerHTML = item;

标签： javascriptjson