Как отобразить все содержимое API выборки JSON в таблице HTML с помощью JavaScript

#javascript #json #html-table #fetch

#javascript #json #html-таблица #выборка

Вопрос:

Я начинаю изучать JavaScript, и у меня возникают некоторые трудности с отображением всех данных, которые я получил из Json PlaceHolder fake API, в моей таблице html. Используя приведенный ниже код, мне удается отобразить только последний элемент из самого 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>`
  }

1. При x.innerHTML = y; многократном вызове вы продолжаете перезаписывать содержимое x. Будет виден только последний y. Вам нужно обернуть ячейки таблицы в <tr> и </tr> и = вместо этого использовать оператор, который добавляет то, что находится справа, к тому, что находится слева от него.

Ответ №1:

Ваш код отображает одни данные, потому что при выполнении цикла он перезаписывает предыдущий, когда он выполняет цикл через json, измените opperand на = и оберните столбцы таблицы строками <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>`
  }