@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();
  • Вопрос задан
  • 1187 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
fetch('https://jsonplaceholder.typicode.com/albums')
  .then(r => r.json())
  .then(r => {
    document.body.insertAdjacentHTML('beforeend', `
      <div class="wrapper">${r.map(n => `
        <div class="item">
          <div>UserId: ${n.userId}</div>
          <div>Id: ${n.id}</div>
          <div>Title: ${n.title}</div>
        </div>`).join('')}
      </div>
    `);
  });

.item {
  border: 1px solid silver;
  padding: 10px;
  margin: 10px;
}
Ответ написан
Комментировать
@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>
`)
}))
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы