Как распарсить данные из ответа JSON?

Question

[Joiromay]

Не понимаю как вывести в DOM вот это https://jsonplaceholder.typicode.com/users/1
Вот мой запрос GET:

var log = new XMLHttpRequest()
log.open(
    'GET',
    'https://jsonplaceholder.typicode.com/users/1',
    true
  )
  
  log.onreadystatechange = function() {
    if (log.readyState != 4) {
      return
    }
    if (log.status === 200) {
        let response = JSON.parse(log.responseText );
      } 
    }
    
log.send();

Должно получится как-то так:

Comments

[Rerurk]

Создайте таблицу, и засуньте туда усе поля

Answer 1

[Сергей Соколов]

Для вдохновения:

Comments

[Joiromay]

А можете показать как это будет работать с GET запросе?
Просто мне именно нужно получать данные с помощью AJAX запроса

[Сергей Соколов]

Joiromay, прочитайте про fetch() — это и есть современный способ делать AJAX-запросы.

[Сергей Соколов]

Joiromay,

fetch(url) // GET-запрос по ссылке
  .then((r) => r.json())  // .затем  получили ответ в JSON — парсим его
  .then((data) => { // .затем тут уже в data – полученные данные как объект JS, 
    // из данных в data рисуем таблицу

Answer 2

[alexalexes]

Как-то так:

var container = document.getElementById('какой-то-id-контейнера-куда-вывести');
container.innerHTML = "<p style='text-align: center'>User info:</p>\
<table>\
<tr><td>Name:</td><td>" + response.name + "</td></tr>\
<tr><td>Username:</td><td>" + response.username + "</td></tr>\
<tr><td>Address:</td><td>" + response.address.city + ", " + response.address.street  + "</td></tr>\
<!-- И дальше в таком же духе -->\
</table>";