Создание HTML таблицы из JSON данных: автоматический способ

Быстрый ответ

В двух словах: если вам требуется преобразовать данные в формате JSON в HTML-таблицу при помощи JavaScript, выполните следующие основные шаги:

1. Конвертируйте JSON в массив объектов.
2. Создайте таблицу и итерируйте элементы массива.
3. Для каждого объекта вставляйте новую строку в таблицу.
4. Для каждой пары ключ-значение объекта добавляйте ячейку в строку.

Рассмотрим этот процесс на примере ниже:

const json = '[{"name":"John", "age":30}, {"name":"Jane", "age":27}]'; 
const data = JSON.parse(json); 
const table = document.createElement('table');

// Заполнение таблицы данными
data.forEach(item => {
  const row = table.insertRow();
  Object.values(item).forEach(text => {
    const cell = row.insertCell();
    cell.textContent = text;
  });
});

document.body.appendChild(table);

Вот в таком виде JavaScript создает HTML-таблицу, где строки соответствуют объектам, а ячейки – их свойствам.

Работаем с jQuery для динамического создания таблицы

Вы работаете с jQuery и хотите что-то новенькое? Примените динамический перебор элементов данных JSON при создании таблицы. Забудьте о днях, когда каждую ячейку приходилось настраивать вручную: вместо этого jQuery полностью контролирует ваш DOM.

Заголовки столбцов вам на заметку? Держите вот:

const json = '[{"name":"John", "age":30}, {"name":"Jane", "age":27}]';
const data = JSON.parse(json);
const table = $('<table></table>');

// Функция для создания заголовков на основе ключей JSON
function addAllColumnHeaders(data) {
  const columnSet = new Set();
  data.forEach(item => Object.keys(item).forEach(key => columnSet.add(key)));
  
  const tr = $('<tr></tr>');
  columnSet.forEach(header => tr.append($('<th></th>').text(header)));
  table.append(tr);
}

addAllColumnHeaders(data);

// Последовательное добавление данных из JSON в таблицу
data.forEach(item => {
  const tr = $('<tr></tr>');
  Object.values(item).forEach(value => tr.append($('<td></td>').text(value)));
  table.append(tr);
});

$('body').append(table);

Чтобы запустить jQuery, воспользуйтесь CDN, и ваши JSON-данные мгновенно превратятся в видовую таблицу.

Новый уровень с плагинами

Хотите дать новый виток своему проекту? Подключите ваши любимые табличные jQuery-плагины вроде JSON2HTML или jPut. Эти плагины упрощают взаимодействие между JSON-данными и HTML-шаблонами с использованием шаблонизации с плейсхолдерах "{{keyName}}".

Ниже приведен пример использования jPut с определением HTML-шаблона:

<table>
  <tbody id="tbody" data-jput="jsonData">
    <tr>
      <td>{{name}}</td>
      <td>{{age}}</td>
    </tr>
  </tbody>
</table>

А вот как можно подключить JSON-данные к шаблону через jQuery. Буквально одной строкой кода:

$('#tbody').jPut({
  jsonData: data
});

Таким образом, данные JSON аккуратно считываются, затем заполняют соответствующие ячейки, в итоге формируя динамичную таблицу.

Можно и без jQuery

Если вы предпочитаете работать без jQuery и ставите в приоритет безопасность, а не количество зависимостей, то нативный JavaScript способен качественно улучшить вашу работу. Давайте покажем HTML-инъекциям, что следует делать:

const json = '[{"name":"John", "age":30}, {"name":"Jane", "age":27}]';
const data = JSON.parse(json);
const table = document.createElement('table');

addAllColumnHeaders(data);
data.forEach(item => {
  const tr = document.createElement('tr');
  Object.keys(item).forEach(key => {
    const td = document.createElement('td');
    td.textContent = item[key];
    tr.appendChild(td);
  });
  table.appendChild(tr);
});

document.body.appendChild(table);

// Функция для динамического создания заголовков
function addAllColumnHeaders(data) {
  const headerTr = document.createElement('tr');
  if (data.length > 0) {
    Object.keys(data[0]).forEach(key => {
      const th = document.createElement('th');
      th.textContent = key;
      headerTr.appendChild(th);
    });
    table.appendChild(headerTr);
  }
}

Визуализация

Давайте представим, как данные JSON преобразуются в HTML-таблицу: лист продуктов в магазине становится богато накрытым праздничным столом:

Список продуктов JSON ->  Богато накрытый HTML-стол
|-------------------|      |------------------------|
| "фрукты": "яблоки", |    |  🍏 Яблоки  | 🍊 Апельсины  |
| "фрукты": "апельсины" |  |------------------------|
|-------------------|

Каждая пара данных JSON трансформируется в обильный стол с угощениями.

Изначально это:
**Данные JSON** 📝 – Простой и "сырой" список.

Становится вот таким:
**HTML-таблица** 🍽️ – Прекрасно организованная и стильно сервированная таблица данных.

При правильном подходе, из бесформенного массива данных можно создать настоящий шедевр 🎩.

Важные нюансы

При реализации описанных выше подходов учитывайте следующие ключевые аспекты:

• Инициализация при загрузке: Обновляйте таблицу с помощью события onLoad, если вы работаете с динамическими данными.
• Целостность данных: Удостоверьтесь, что все ключи находятся в JSON-данных перед их добавлением в таблицу.
• Структура документа: Убедитесь, что вы используете подходящий контейнер (например, tbody с id "tbody" для jPut).
• Производительность: При работе с большим объёмом данных применяйте cloneNode для оптимизации работы с узлами DOM.
• Индивидуальная настройка: Настройте используемые вами библиотеки и плагины в соответствии с индивидуальными требованиями и предпочтениями.

Полезные материалы

1. Использование Fetch API – Web APIs | MDN — Детальное руководство по загрузке JSON-данных через Fetch API.
2. Введение в JSON — Глубокое погружение в основы JSON и его применения в JavaScript.
3. Разбор объектов JSON для HTML-таблицы – Stack Overflow — Обсуждение трансформации JSON-данных в HTML-таблицу на форуме.
4. jQuery.getJSON() | jQuery API Documentation — Описание метода .getJSON() из библиотеки jQuery для эффективного извлечения JSON-данных.
5. HTML DOM Collection строк таблицы — Инструкция по управлению строками таблицы в HTML DOM с использованием JavaScript.
6. Json-to-HTML-Table: Простой конвертер Json в HTML-таблицу — JavaScript-библиотека, предназначенная для быстрой конвертации JSON-данных в структурированную HTML-таблицу.