Как вывести элементы массива в разные блоки по ID?

Question

[Recreator]

Получаю массив и пытаюсь раскидать данные по ID в разные блоки:

async function getJson() {
  const requestURL = 'https://jsonplaceholder.typicode.com/posts';
  const request = new Request(requestURL);
  const response = await fetch(request);
  const json = await response.json();
  displayData(json);
}

function displayData(json) {
  json.forEach((i) =>
    document.getElementById(`${i.id}`).insertAdjacentHTML(
      'beforeEnd',
      ` <h2>Id: ${i.id}</h2>
        <h3>${i.title}</h3>
        <p>${i.body}</p>
      `
    )
  );
}
getJson();

<section>
      <div id="1"></div>
      <div id="2"></div>
      <div id="3"></div>
      <div id="4"></div>
      <div id="5"></div>
    </section>

Странно, но все работает, несмотря на ошибку:

TypeError: Cannot read properties of null (reading 'insertAdjacentHTML').

Вопрос: а как это сделать правильно?

Answer 1

[0xD34F]

Проверяйте наличие элементов:

function displayData(arr) {
  arr.forEach(n => {
    const el = document.getElementById(n.id);
    if (el) {
      el.innerHTML = `
        <h2>Id: ${n.id}</h2>
        <h3>${n.title}</h3>
        <p>${n.body}</p>
      `;
    }
  });
}

Или, если надо вывести всё, создавайте их:

function displayData(arr) {
  document.querySelector('section').innerHTML = arr
    .map(n => `
      <div id="post-${n.id}">
        <h2>Id: ${n.id}</h2>
        <h3>${n.title}</h3>
        <p>${n.body}</p>
      </div>`)
    .join('');
}

Comments

[Recreator]

Благодарю!

Answer 2

[twobomb]

Ну это же очевидно, что `${i.id}` передаёт такой id элемента, которого не существует на странице.
Оно будет работать, но какой-то элемент пропускает, или может там пустой приходит...