Как вывести на страницу полученные данные?

Question

[Derbakov]

Надо воспользоваться free REST API: https://jsonplaceholder.typicode.com/ для получения 100 albums, и вывести их на страницу в виде:

UserId : значение userId с пришедшего вам объекта,
Id : значение Id с пришедшего вам объекта,
Title : значение title с пришедшего вам объекта

Понимаю, что так могу вывести в консоль, а на экран нет:

const xhr = new XMLHttpRequest();
const url = 'https://jsonplaceholder.typicode.com/albums';

xhr.open('GET', url);

xhr.addEventListener('load', () => {
    console.log(JSON.parse(xhr.response));
});

xhr.send();

Comments

[Derbakov]

понимаю, что так могу вывести в консоль, а на экран нет

const xhr = new XMLHttpRequest();
const url = 'https://jsonplaceholder.typicode.com/albums';

xhr.open('GET', url);

xhr.addEventListener('load', () => {
    console.log(JSON.parse(xhr.response));
});

xhr.send();

Answer 1

[0xD34F]

fetch('https://jsonplaceholder.typicode.com/albums')
  .then(r => r.json())
  .then(r => {
    const keys = [ 'userId', 'id', 'title' ];

    // собираем разметку
    document.body.insertAdjacentHTML('beforeend', `
      <div class="wrapper">${r.map(n => `
        <div class="item">${keys.map(k => `
          <div>${k}: ${n[k]}</div>`).join('')}
        </div>`).join('')}
      </div>
    `);

    // или, создаём элементы напрямую
    function createElement(tag, className, children) {
      const el = document.createElement(tag);
      el.className = className;
      el.append(...children);
      return el;
    }

    document.body.append(
      createElement('div', 'wrapper', r.map(n =>
        createElement('div', 'item', keys.map(k =>
          createElement('div', '', [ `${k}: ${n[k]}` ])
        ))
      ))
    );
  });

.wrapper {
  border: 3px solid black;
  padding: 10px;
  margin: 10px;
}

.item {
  border: 1px solid silver;
  padding: 5px;
  margin: 5px;
}

Answer 2

[shsv382]

fetch('https://jsonplaceholder.typicode.com/albums')
.then(response => response.json())
.then(data => data.forEach((album) => {
document.body.insertAdjacentHTML('beforeEnd',  `
<p>${album.userId}</p>
<p>${album.id}</p>
<p>${album.title}</p>
`)
}))

Comments

[Derbakov]

спасибо!
а как бы это выглядело без fetch?

[shsv382]

Derbakov, некрасиво и неэлегантно))) можно с async/await, но это тоже fetch