Как отобразить json в html

Работа с JSON

Нет, действительно, что такое JSON?

JSON существует как строка,что необходимо при передаче данных по сети. Он должен быть преобразован в собственный объект JavaScript, если вы хотите получить доступ к данным. Это не большая проблема. JavaScript предоставляет глобальный объект JSON, который имеет методы для преобразования между ними.

Структура JSON

Чтобы получить доступ к последующим данным по иерархии, вам просто нужно объединить требуемые имена свойств и индексы массивов. Например, чтобы получить доступ к третьей сверхспособности второго героя, указанного в списке участников, вы должны сделать следующее:

Примечание. Мы сделали JSON, видимый выше, доступным внутри переменной в нашем примере JSONTest.html (см. исходный код). Попробуйте загрузить это, а затем получить доступ к данным внутри переменной через консоль JavaScript вашего браузера.

Массивы как JSON

Другие примечания

Активное обучение: Работа с примером JSON

Итак, давайте рассмотрим пример, чтобы показать то, как мы можем использовать некоторые данные JSON на веб-сайте.

Источник

html2json

Как обычно мы храним в базе данных что-то, что нужно показать пользователю и обладает некоторыми свойствами разметки? Кто хотя бы раз делал свой блог, хабр или похожее сразу скажет — html. А что, если я скажу, что можно сделать иначе? JSON.

Я бы хотел рассмотреть преимущества и недостатки подобного хранения, ну или попытаться, по крайней мере.

Что? Json? Зачем это вообще надо?

Описание:

У нас имеется сервис, в бд мы храним html для отображения некоторого контента.

Если я не ошибаюсь, то так как раз сделано на всем нами любимом (или не сильно) хабре. \
(Я посмел предположить, что хабр хранит статьи именно так)

Проблема:

Мы, как фронтендеры, должны поддерживать на клиенте некоторый набор легаси css или как-то тяжело его обновлять.

Если наш фронтендер захочет как-то обновить наш UI, то он должен учитывать, что на сервере весь html в бд содержит старые классы css и волшебным образом не поменяется и скорее всего вообще меняться не будет.

Можно, например, посмотреть, что выдается для мобильной версии фронтенда хабра под недавним мегапостом ссылка на апи. Конечно, сомнительно, что пост хранится прям в таком виде в бд, но все может быть. (возможно, это связанно с тем что апи хабра до сих пор не открыто)

Внимание: Не большой скрин, просьба спрятать женщин, детей и слишком чувствительных гиков:

Некоторое количество заинлайненого css и javascript (около половины поста генерируется им) осталось за кадром.

Решение:

Будем хранить не html, а json, с определенной заранее или легко расширяемой структурой, что бы каждый элемент имел четкую структуру и был далек от представления у фронтендера.

Профит, который получим:

Мы полностью абстрагировались от представления данных и сконцентрировались лишь на содержимом. Благодаря этому мы в любой момент сможем с достаточной простотой обновить код преобразования (или рендер) json в отдаваемый браузеру html. Только теперь мы сможем написать похожий рендер из json’а не только в html, но и для нативных приложений без необходимости использовать Web View и аналоги.

Рассмотрим идею на примерах

Для этого предлагаю ознакомится с тем, что выдает по api Хабр (только уже без мегапостов) \
Важно: я предполагаю, что статьи хранятся в том же виде, в каком и отправляются.

Показывать я будут сначала html, а потом альтернативу в виде json.

Рассмотрим более комплексный пример.

А вот так может например выглядит спойлер (просто напомню, что в html5 давно есть details):

Иииии… преобразуем это в json:

Вообще, Html очень удобен, чтобы представлять просто текст.
Только взгляните на этого монстра:

Столько символов, чтобы представить один параграф с одной ссылкой.

Все это я, конечно, переводил не в ручную (кроме некоторых кейсов). Я брал некоторые статьи и прогонял html через свою небольшую консольную утилиту на Dart, её результаты работы вы и увидели. Да, она написана не идеально, но для проверки концепта — сойдет.

Потыркать утилиту и посмотреть код можно по ссылке на мой репозиторий.

Вообще к чему эти примеры. Ими я хотел сказать, что если заставляете пользователей использовать html для создания статей, то результат становится непредсказуемым, а повлиять на него можно лишь большим усилием и при желании самого пользователя.

Небольшой бенчмарк

Что я вообще сравниваю? Мне интересно 2 вещи:

Зачем тестировать второй вариант? Если вы используете React, например, вместе с библиотекой «html_to_react» (внутри она использует «html-dom-parser»), то, думаю, вам будет интересно узнать об альтернативе.

Кратко опишу методику тестирования:

Результаты тестирования

После запуска бенчмарка мы получим такие результаты:

Ок, а какие плюсы и минусы подобного решения?

Сделав подобное преобразование на сервере, в некоторых ситуациях можно немного ослабить нагрузку на гаджет пользователя

Независимость от html

Мы устраняем зависимость от того как хотим представлять на клиенте кнопку, спойлер, или цитату. независимы от css классов от различных атрибутов.

Мы получаем возможность безболезненно создать на основе данных с сервера нативные виджеты, будь то андроид, ios, flutter, web или что-то из мира десктопа.

И это все без WebView и аналогов.

Избавляемся от зависимостей

json весит незначительно, но больше чем аналогичный html

возможно и обратное, если:

json придется в любом случае конвертировать в нативные для данной платформы виджеты будь то веб с его html или нативный мир уже с собственными особенностями

И при этом не очень понятно, когда это лучше делать в случае веб-приложений:

html очень многогранный, и если есть необходимость поддерживать весь html, то, на мой взгляд, затея выглядит достаточно сомнительной и трудоемкой (не придешь ли ты случайно к тому, что изобретешь браузер)

отсутствует стандартизация, получается, что вы создаете велосипед и поддерживать его придется вам

Это все, конечно, хорошо, но как можно это применить?

Вот мой небольшой список:

Заключение

В качестве итога я бы хотел сказать, что не предлагаю всем разом переходить на описанный мной в данной статье подход. В первую очередь мне интересно мнение других разработчиков, как бекенд, так и фронтенд. Скорее всего, я не учел нюансы и готов выслушать и обсудить критику и замечания.

Источник

JavaScript – формат JSON и примеры работы с ним

Урок, в котором рассматривается, что такое JSON и какие он имеет преимущества по сравнению с другими форматами данных.

Понятие JSON

JSON (JavaScript Object Notation) – это текстовый формат представления данных в нотации объекта JavaScript. Предназначен JSON, также как и некоторые другие форматы такие как XML и YAML, для обмена данными.

Несмотря на своё название, JSON можно использовать не только в JavaScript, но и в любом другом языке программирования.

JSON по сравнению с другими форматами также обладает достаточно весомым преимуществом. Он в отличие от них является более компактным, а это очень важно при обмене данными в сети Интернет. Кроме этого, JSON более прост в использовании, его намного проще читать и писать.

При веб-разработке JSON очень часто применяется в качестве формата для передачи информации от веб-сервера клиенту (веб-браузеру) при AJAX запросе.

Как выглядит этот процесс? Его можно представить в виде двух шагов. На первом шаге, сервер, по запросу пришедшему ему от клиента, сначала формирует некоторый набор данных в удобном формате, который затем можно было бы очень просто упаковать в строку JSON. Завершается работа на сервере отправкой JSON данных в качестве результата клиенту. На втором шаге, клиент получает в качестве ответа от сервера строку JSON и распаковывает её, т.е. переводит в JavaScript объект. После этого на клиенте выполняются дальнейшие с ними действия, например, выводятся на страницу.

Это один из примеров использования формата JSON. Но его применение не ограничивается только этим сценарием, их очень много и не только в веб.

В JSON, в отличие от XML и YAML, данные организованы также как в объекте JavaScript. Но JSON – это не объект, а строка. При этом не любой объект JavaScript может быть переведён один к одному в JSON. Например, если у объекта есть методы, то они при преобразовании в строку JSON будут проигнорированы и не включены в неё.

Структура формата JSON

Структура строки JSON практически ничем не отличается от записи JavaScript объекта.

Чтобы не усложнять доступ к данным, при задании ключам имён лучше придерживаться тех же правил, что и при именовании переменных.

Второе отличие заключается в том, что значение ключа в JSON можно задать только в одном из следующих форматов: string (строкой), number (числом), object (объектом), array (массивом), boolean (логическим значением true или false ) или null (специальным значением JavaScript). Например, значение ключа в JSON не может быть функцией или датой (объектом типа Date ).

Пример JSON строки, состоящей из различных типов данных:

При этом стоит обратить внимание на то, что JSON не допускает использование внутри своей структуры комментариев.

Работа с JSON в JavaScript

Как было уже отмечено выше, JSON – это строка.

Работа с JSON в JavaScript обычно осуществляется в двух направлениях:

Парсинг JSON

Пример использования eval для парсинга JSON:

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

Использование метода JSON.parse :

Конвертирование объекта JavaScript в строку JSON

Преимущества формата JSON

Формат представления данных JSON имеет следующие преимущества:

Из-за того что данный формат имеет очень много преимуществ он стал применяться не только в JavaScript, но и во многих других языках, таких как C, Ruby, Perl, Python, PHP и т.д.

Сравнение форматов JSON и XML

Формат JSON имеет следующие преимущества перед форматом XML:

Работа с данными JSON после парсинга

Работа с данными JSON после парсинга осуществляется как с объектом JavaScript.

Рассмотрим основные моменты:

Для перебора элементов в объекте можно использовать цикл for..in :

Для перебора элементов массива можно использовать следующий цикл:

Источник