Как вывести результат из ответа JSON на HTML страницу?

Question

[Максим К]

Всем привет. В силу ограниченных знаний или скорее большого не опыта на JS, столкнулся с проблемой - не могу вывести результат на HTML страницу, после парсинга JSON.

for(let i=0; i<count; i++) {
let trequest = new XMLHttpRequest();
формирую поля запроса
..........

if(trequest.readyState === XMLHttpRequest.DONE)
   {
    data = JSON.parse(trequest.response); 
    createTable(i, data);
   }   
  };
 trequest.send(); 
 }
});


function createTable(i, data){
 const div = document.createElement("div");
 div.classList.add('data' + [i]);
 document.body.append(div +[i]);
 div.innerHTML =  i + "  "  + data; 
}

В общем из-за того, что кол-во строк в переменной count может быть разное, поэтому есть цикл for. Далее код полностью рабочий, т.е. делаю 1 запрос -получаю ответ, делаю 2-й запрос - получаю ответ и в консоль все успешно выводится. Но никак не могу сообразить, что бы хоть бы построчно вывести на html страницу, а самое сложное это вообще в таблицу данные загнать.

Что хотелось бы:
1. сделал запрос - вывел строку в html, сделал следующий запрос - вывел ниже строку и т.д.
2. все, что в строках - вывести в виде таблицы.

Подскажите, как такое реализовать??? Полный код не нужен, хотя бы часть или кусок примера. Спасибо.

Answer 1

[Алексей Ярков]

Получите ВСЕ данные и потом выводить один раз.
XMLHttpRequest меняем на fetch, для параллелизации запросов используем Promise.all. И когда всё загружено - рисуем DOM.

Comments

[Максим К]

Спасибо, гляну примеры.

[underdante]

Максим К, не забудь про то, что fetch и XMLHttpRequest асинхронны.

Answer 2

[iljaGolubev]

function createTable(i, data){
 const div = document.createElement("div");
 div.classList.add('data' + [i]);
 document.body.append(div); // тут!
 div.innerHTML =  i + "  <pre>"  + JSON.stringify(data,null,'  ' ) + "</pre>"; 
}

С таблицей будет сложнее пока вы получаете данные в разных реквестах - порядок XMLHttpRequest.DONE может не соответствовать i++;
но для начала - вот (не проверял)

const t= document.createElement('table')
function addRow(table, index, json){
    const row=document.createElement('tr')
    const cell=document.createElement('td')
    cell.innerHTML= i + "  <pre>"  + JSON.stringify(json,null,'  ' ) + "</pre>"
    row.appendChild(cell)
    table.appendChild(row)
}

// ваши реквесты
for(let i=0; i<count; i++) {
...
    addRow(1,data)
...
}

Comments

[Максим К]

Спасибо