Визуализация JSON в HTML: форматирование и подсветка синтаксиса

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

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

Если задача поставлена просто и требуется наглядно представить JSON-данные в HTML, то можно использовать функцию JSON.stringify() в JavaScript и вывести ее результат в тег <pre>. Это обеспечит легкость восприятия и хорошую читаемость:

Скопировать код

const jsonData = { hello: "world" };
document.body.innerHTML = `<pre>${JSON.stringify(jsonData, null, 2)}</pre>`;

Так, JSON можно отобразить прямо в браузере в течение считанных секунд.

Читаемость – ключевой момент

Для увеличения читаемости JSON можно использовать подсветку синтаксиса – возможность, которую предоставляет инструмент Google Code Prettify:

HTML

Скопировать код

<link href="path/to/prettify.css" type="text/css" rel="stylesheet" />
<script src="path/to/prettify.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', PR.prettyPrint);
</script>

<pre class="prettyprint">${JSON.stringify(jsonData, null, 2)}</pre>

Такой подход делает код ярким и понятным, что приятно глазу разработчика.

Воспользуйтесь преимуществами библиотек

Если задача у вас стоит более сложная и требуется не только отобразить JSON, но и обеспечить интерактивность его взаимодействия с пользователем, your может пригодиться библиотека "pretty-json":

HTML

Скопировать код

<link href="path/to/pretty-json.css" rel="stylesheet">
<script src="path/to/pretty-json.min.js"></script>

<script>
  const jsonData = { key: "value" };
  const el = PrettyJSON.view.Node({
      el: document.querySelector("#pretty-json"),
      data: jsonData
  });
</script>

<div id="pretty-json"></div>

"pretty-json" позволяет вам создать стильное и функциональное отображение данных.

Сырые данные становятся красочными HTML-элементами

Помимо отображения, JSON можно эффективно преобразовать в HTML-элементы. Например, вы можете превратить его в таблицу:

Скопировать код

function jsonToTable(jsonData) {
  const table = document.createElement('table');
  for (const key in jsonData) {
    const row = table.insertRow();
    const cellKey = row.insertCell(0);
    const cellValue = row.insertCell(1);
    cellKey.textContent = key;
    cellValue.textContent = jsonData[key];
  }
  return table.outerHTML;
}

const data = { name: "John", age: 30 };
document.body.innerHTML = jsonToTable(data);

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

Совместимость и производительность

Учитывая совместимость браузеров и производительность, следует помнить о возможных исключениях при работе с JSON.stringify(). Также рекомендуется проверять, насколько эффективно выбранная вами библиотека справляется с большим объемом данных.

Кликабельный JSON

Чтобы сделать свою работу с JSON еще более интерактивной, можно преобразовать строки, содержащие ссылки, в кликабельные элементы:

Скопировать код

const clickableJSON = (json) => {
  for (let key in json) {
    if (typeof json[key] === 'string' && json[key].startsWith('http')) {
      json[key] = `<a href='${json[key]}'>${json[key]}</a>`;
    }
  }
  return json;
};

const jsonDataWithLinks = clickableJSON({ link: "http://example.com" });
document.body.innerHTML = `<pre>${JSON.stringify(jsonDataWithLinks, null, 2)}</pre>`;

Такой подход делает наш JSON адаптированным к веб-стандартам и более дружелюбным для пользователя.