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

Ссылка скопирована
JavaScript
1 ответ

Всем привет. В силу ограниченных знаний или скорее большого не опыта на 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;  }

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. все, что в строках - вывести в виде таблицы.

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

Дополнительно:

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

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

Ответы:

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

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) ... }

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) ... }

  • Спасибо
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Игорь Волков Ответ

Для того чтобы вывести результат из ответа JSON на HTML страницу, вам необходимо сначала получить JSON данные, а затем вывести их на страницу с помощью JavaScript.

Допустим, у вас есть JSON данные, которые вы хотите вывести на страницу. Вот пример кода на PHP, который выводит JSON данные:

$data = array(
    'name' => 'John Doe',
    'age' => 30,
    'city' => 'New York'
);
 
$json = json_encode($data);
echo $json;

$data = array( 'name' => 'John Doe', 'age' => 30, 'city' => 'New York' ); $json = json_encode($data); echo $json;

Теперь, чтобы вывести эти данные на HTML страницу, вам нужно использовать JavaScript. Вот пример кода, который делает это:

 
    fetch('example.php')
        .then(response => response.json())
        .then(data => {
            document.getElementById('result').innerHTML = `Name: ${data.name}, Age: ${data.age}, City: ${data.city}`;
        });
 
 
<div id="result"></div>

fetch('example.php') .then(response =&gt; response.json()) .then(data =&gt; { document.getElementById('result').innerHTML = `Name: ${data.name}, Age: ${data.age}, City: ${data.city}`; }); <div id="result"></div>

В этом примере мы используем функцию fetch для загрузки JSON данных из файла example.php. Затем мы используем методы then для обработки полученных данных и выводим их на страницу, обновляя содержимое элемента с id "result".

Таким образом, вы можете легко вывести результат из ответа JSON на HTML страницу, используя PHP для генерации JSON данных и JavaScript для их отображения на странице.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ