How to display the received data on the page?

Question

JavaScript

You need to use the free REST API: https://jsonplaceholder.typicode.com/ to get 100 albums, and display them on the page in the form:

UserId : userId value from the object that came to you,
Id : Id value from the object that came to you,
Title : value title from the object that came to you

I understand that I can display it in the console, but not on the screen:

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

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;
}