如何使用 HTML 表在 HTML 表上显示所有 JSON 获取 API 内容

Question

I'm starting to learn JavaScript, and i am having some difficulties for displaying the whole data i got from Json PlaceHolder fake API on my html table. 使用下面的代码，我只是设法显示 API 本身的最后一个元素，而不是我想要的所有元素。

有人可以帮我弄清楚我应该怎么做吗？

有代码：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((json) => json.forEach(tableElements)
  )

  function tableElements (element, index, arr){
    arr[index] = document.querySelector('#posts-table tbody').innerHTML = 
    `<td>${element.userId}</td>
    <td>${element.id}</td>
    <td>${element.title}</td>
    <td>${element.body}</td>`
  }

Answer 1

您的代码显示一个数据，因为当循环进行时，它会在循环通过 json 时覆盖前一个数据，将操作数更改为+=并用行<tr>... </tr>包装表列
在此处尝试此代码

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((json) => json.forEach(tableElements)
  )

  function tableElements (element, index, arr){
    arr[index] = document.querySelector('#posts-table tbody').innerHTML +=
    `<tr>
        <td>${element.userId}</td>
        <td>${element.id}</td>
        <td>${element.title}</td>
        <td>${element.body}</td>
    </tr>`
  }