Как можно отобразить значение из JSON ответа на HTML странице?

Как вывести полученные данные в виде таблицы на HTML страницу после парсинга JSON? Количество строк в переменной `count` может быть разным, поэтому используется цикл `for`. Хотелось бы вывести каждую строку последовательно и организовать данные в виде таблицы. Как это реализовать?
  • 1 ноября 2023 г. 20:28
Ответы на вопрос 3
Для отображения значения из JSON ответа на HTML странице можно использовать JavaScript. Вот пример решения, который выводит данные в виде таблицы:

HTML-разметка:
```html
<table id="data-table">
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
      <th>Заголовок 3</th>
    </tr>
  </thead>
  <tbody id="data-body">
    <!-- Здесь будут добавляться строки с данными -->
  </tbody>
</table>
```

JavaScript код:
```javascript
// Предположим, что response - это JSON ответ
var response = '[{"name": "John", "age": 25, "city": "New York"}, {"name": "Alice", "age": 30, "city": "London"}]';

// Преобразовываем JSON в объект JavaScript
var data = JSON.parse(response);

// Получаем таблицу и тело таблицы
var table = document.getElementById('data-table');
var tbody = document.getElementById('data-body');

// Для каждого объекта в данных создаем новую строку таблицы
for (var i = 0; i < data.length; i++) {
  var row = document.createElement('tr');

  // Для каждого свойства в объекте создаем новую ячейку и добавляем значение
  for (var prop in data[i]) {
    var cell = document.createElement('td');
    cell.textContent = data[i][prop];
    row.appendChild(cell);
  }

  tbody.appendChild(row);
}

// Добавляем таблицу на страницу
document.body.appendChild(table);
```

В результате, каждый объект из JSON ответа будет добавлен в виде строки в таблицу на HTML странице.
Получите все данные одновременно, используя fetch вместо XMLHttpRequest. Чтобы параллельно отправить несколько запросов, используйте Promise.all. После того, как все данные загружены, отобразите их в DOM. 
 Используйте Fetch вместо XMLHttpRequest для получения всех данных сразу. Для параллельной загрузки запросов используйте Promise.all. После полной загрузки данных, отобразите их в DOM.
Похожие вопросы