Получение данных из json с помощью ajax и их отрисовка в dom

Question

Нужно словить json файл с помощью ajax и отрисовать его данные в dom через цикл for. Вот код:

var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.addEventListener("load", function() {
    if(xhr.readyState !=4) return;
    if(xhr.status !=200) {
        console.log(xhr.status + ": " + xhr.statusText);
    } else {
        console.log(xhr.response);
    }
});
xhr.open("GET", "https://js.dump.academy/code-and-magick/data");
xhr.send();
var similarWizardTemplate = document.querySelector('#similar-wizard-template').content.querySelector(".setup-similar-item");
var similarWizardList = document.querySelector('.setup-similar-list');
for (var i = 0; i < 4; i++) {
    var wizardsElements = similarWizardTemplate.cloneNode(true);
    wizardsElements.querySelector('.setup-similar-label').textContent = 'данные из JSON'[i].name;
    wizardsElements.querySelector('.wizard-coat').style.fill = 'данные из JSON'[i].colorCoat;
    wizardsElements.querySelector('.wizard-eyes').style.fill = 'данные из JSON'[i].colorEyes;
    similarWizardList.appendChild(wizardsElements);
};

Круто, а что не получается или в чем у вас проблема? — Nilsan, Dec 03 '18 at 13:16

Denis Bubnov · Accepted Answer · 2018-12-03T13:51:49.717

Насколько я понимаю, Вы не в том месте делаете обработку полученного результата. Вот Ваш пример, только немного переписан, вместо addEventListener используется onreadystatechange. Собственно, внутрь этой функции и поместите обработку вашего результата в переменной jsonResponse объявленную мной внутри метода:

var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("GET", "https://js.dump.academy/code-and-magick/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState != 4) return;

  if (xhr.status != 200) {
    console.log(xhr.status + ": " + xhr.statusText);
  } else {
    var jsonResponse = xhr.response; // вот тут должен быть ваш JSON в ответе
    // далее работа с переменной jsonResponse в которой лежит ответ (данные из JSON)
  }
};
xhr.send();

В open указан третий аргумент true (или если третьего аргумента нет) и запрос выполняется асинхронно. Это означает, что после вызова xhr.send() код не «зависает», а продолжает выполняться, а результат ответа на запрос приходит через событие onreadystatechange. Событие readystatechange происходит несколько раз в процессе отсылки и получения ответа, состояние readyState - 4 (запрос завершён).

Небольшой примечание: В IE8 и IE9 поддержка XMLHttpRequest ограничена. IE9 по умолчанию кеширует все ответы. В IE11 запись xhr.responseType = 'json' не сработает в силу того, что это не поддерживается в нем. Если не указать тип запроса как JSON, то искать нужно в responseText, а не в response свой результат. Это касается конфигурирования с использованием типа application/json или при отсутсвиии указания responseType.

В данном случае сервер должен возвращать JSON в виде текста, который браузер превращает в объект вызовом JSON.parse(xhr.responseText) (в неашем случае это JSON.parse(xhr.response)) и мы работаем с полученным ответом как с объектом.

Также, советую почитать про параметры xhr.open(method, URL, async, user, password) - обратите внимание на третий параметр async - который указывает, как будет выполнен запрос (если установлено в false, то запрос производится синхронно, если true – асинхронно).

Полезные ссылки для изучения:

Да я это понял. Я не понимаю как мне в цикле for обращаться к xhr.response — RavenTheX, Dec 03 '18 at 13:50
@RavenTheX внутри функции я оставил переменную jsonResponse - в ней ответ лежит (немного обновил свой ответ, вместо onload использовал readystatechange). Это ваш объект, значит сюда (сразу после переменной) можете положить ваш цикл - это и будет обработка результата. — Denis Bubnov, Dec 03 '18 at 13:54

Получение данных из json с помощью ajax и их отрисовка в dom

1 Answers1