Как конвертировать JSON в HTML

JSON

JSON Нотация объектов JavaScript это легкий текстовый формат обмена данными. JSON основан на двух основных структурах данных (пары ключ-значение и упорядоченные списки) и не зависит от языка. В JSON данные могут быть только в текстовой форме, пока они обмениваются между браузером и сервером. Любой объект JavaScript можно преобразовать в текст JSON.

HTML

HTML Язык гипертекстовой разметки — это язык, используемый для разработки и отображения веб-страниц. HTML — это язык форматирования, в котором основное внимание уделяется тегам и атрибутам для разметки веб-страниц. HTML нельзя назвать языком программирования, поскольку он не содержит никаких условных операторов или динамической структуры.

Способы преобразования JSON в HTML

  1. Использование онлайн-конвертера
  2. Используйте функции JSON

Как использование онлайн-конвертера

Использование онлайн-конвертера для преобразования JSON в HTML немного утомительно, и его нельзя использовать для динамического преобразования через веб-сайт. Однако этот инструмент пригодится, если вы хотите проанализировать один файл JSON по причинам, не связанным с конкретным веб-сайтом. Вот ссылка на онлайн-конвертер под названием ConvertJSON. Выглядит это примерно так:

ConvertJSON довольно прост. Есть три способа ввода данных:

  1. Файл JSON;
  2. URL
  3. Необработанный текст JSON

После ввода данных вы получите текст HTML, который преобразует ваш JSON в таблицу HTML. Вы можете скопировать это и использовать!

Как использовать функции JSON

Функции JSON являются более удобным методом и могут быть легко включены в веб-приложение. Ключевая функция, которая позволяет нам преобразовывать JSON в HTML во время выполнения, — это JSON.parse () . Метод JSON.parse() принимает текстовые данные JSON и преобразует их в объект JavaScript. Затем вы можете легко использовать этот объект для отображения данных в HTML.. Давайте посмотрим на пример:

  • Вывод
  • HTML
JSON в HTML

Здесь у нас есть объект с тремя атрибутами:

  var my_obj = {name: "Erik", возраст: 17, школа: "Edpresso High"};  

В приведенном выше коде мы сначала создали объект, а затем преобразовали его в JSON с помощью JSON.stringify () . Это хороший способ имитировать преобразование, поскольку данные принимаются по сети в текстовой форме:

  var my_json = JSON.stringify (my_obj);  

Затем мы передаем этот текст в функцию JSON.parse () , и она преобразует его в объект JavaScript:

  var my_json = JSON.stringify (my_obj); var parsed_obj = JSON.parse (my_json);  

Наконец, мы используем объект для визуализации тега HTML:

  json_to_html_tag.innerHTML = "Преобразование JSON в HTML 

" + "Имя:" + parsed_obj.name + "
Возраст:" + parsed_obj.age + "
Школа:" + parsed_obj.school;

Оцените статью
nanomode.ru
Добавить комментарий