Вывести объект из API в браузер используя map() и forEach()

Question

Изучаю JS самостоятельно. Хочу вывести объект из API (https://jsonplaceholder.typicode.com/posts/) в браузер в формате

<div>
  <p>userId</p>
  <p>id</p>
  <p>title</p>
  <p>post</p>
</div>

c использованием map() и forEach(). Как встроить методы в и без них неработающий код - не понимаю.

function showObjectBeautiful() {
  const button = document.getElementById('show');
  const userId = document.getElementById(`userId`);
  const id = document.getElementById(`id`);
  const title = document.getElementById(`title`);
  const body = document.getElementById(`body`);

  fetch(`${API_URL}/posts/${id}`).then((response) => {
    return response.json();
  }).then((data) => {
    const obj = (data);
    userId.innerText = obj[userId];
    id.innerText = obj[id];
    title.innerText = obj[title];
    body.innerText = obj[body];

  }).catch((err) => {
    console.log("Fetch Error", err);
  });
}

<div>
  <button class="button" id="show" onclick="showObjectBeautiful()">Show</button>
  <div class="show">
    <p class="show" id="userId">>userId</p>
    <p class="show" id="id">id</p>
    <p class="show" id="title">title</p>
    <p class="show" id="body">body</p>
  </div>
</div>

Answer 1

хочу вывусти из API не сплошной объект в формате строки, а вывести каждый ключ отдельным заголовком
и так проделать со всеми ключами всех объектов

Предложу такой вариант реализации...

const om = document.querySelector('main')
document.querySelector('button').addEventListener('click', _ => {
  fetch('https://jsonplaceholder.typicode.com/posts/')
    .then(res => res.json())
    .then(res => {
      om.innerHTML = ''
      res.forEach(o => {
        const od = document.createElement('div')
        Object.entries(o).forEach(([k, v]) => {
          const o = document.createElement('p')
          o.textContent = k + ': ' + v
          od.append(o)
        })
        om.append(od)
      })
    })
    .catch(console.log)
})

<button>Тест</button>
<main></main>

БЛОГ НА HUSL

Вывести объект из API в браузер используя map() и forEach()

Ответы (1 шт):