JsonDiscovery: Меняем опыт просмотра JSON в браузере

Original author: Roman Dvornov
  • Translation

Сегодня я хочу рассказать о JsonDiscovery, браузерном расширении для просмотра JSON. Возможно вы скажете: «у нас и так полно подобных расширений!». Да, полно, но фичи JsonDiscovery отличают его от других и делают его действительно мощным.


Давайте же взглянем поближе...





Для демонстраций я использовал JSON-файл коллекции всех карт из проекта Hearthstone-DB (спасибо Ольге Кобец за идею). И вот как он выглядит, если открыть его в браузере с установленным JsonDiscovery:


all-cards.json проекта Hearthstone-DB открытый в браузере с установленным JsonDiscovery


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


  • Простое копирование фрагментов JSON в буфер
  • Сигнатура структуры JSON
  • Трансформация JSON с помощью запроса
  • Подсказки при написании запроса к JSON
  • Настройка отображения данных из JSON
  • Шаринг «отчетов» по ссылке

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


Простое копирование фрагментов JSON в буфер


Бывает что нужно скопировать фрагмент JSON'а, то есть некоторого вложенного объекта или массива. С JsonDiscovery это простая задача, так как каждый развернутый объект и массив имеют кнопки действий. Одна из них кнопка «ƒ» button, нажав которую можно скопировать JSON в компактном или форматированном виде:


Меню действий на раскрытом объекте


Сигнатура структуры JSON


Когда вы изучаете данные, полезно иметь представление об их структуре. Просто наведите на кнопку «S» в панели действий на развернутом объекте или массиве и вы увидите сигнатуру структуры поддерева, как примерно это выглядит в TypeScript:


Сигнатура структуры данных как в TypeScript, удобно для набора объектов


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


Быстрый обзор значений, использованных для поля


Запросы к JSON


Клик по кнопке «Make report» переводит вас на страницу, где вы можете делать запросы к вашему JSON и/или настраивать его отображение:


За кнокой «Make report» кроется возможность делать запросы


Для запросов используется язык Jora. Он частично основывается на синтаксисе JavaScript 2015+, но в большей степени, задуман быть компактным и выражать больше (в рамках задачи запроса к данным).


Обычно вам нужно только выбрать некоторое подмножество данных используя некоторый путь, вроде foo.bar.baz. Если ключ имеет запрещенные символы просто используйте [] (квадратные скобки), то есть foo['a key with whitespaces']. Все как в JavaScript, за исключением того, что не нужно переживать существует путь или нет:


Простой запрос в виде пути


Часто необходимо использовать фильтрацию или мапинг. Jora предоставляет .[] для фильтрации и .() для мапинга:


Запрос с фильтрацией и мапингом


Пример на скриншоте выше (cards.[health].({ name, health })) можно записать на JavaScript так:


cards.filter($ => $.health).map($ => ({ name: $.name, health: $.health }))

Что гораздо многословнее, не так ли?


Вы можете найти больше о самом Jora и его синтаксисе в его репозитории на github. (Кстати, у него так же есть CLI и песочница)


Подсказки при написании запроса к JSON


Эту фичу невозможно описать правильно. Это нужно попробовать самому. Хотя бы раз:



Настройка отображения данных


Когда вы выбрали необходимые данные из JSON, вы можете настроить их отображение. Например, вывести их таблицей, или списком, вроде такого:



К сожалению, на данный момент нет достаточной документации о том, как описывать отображение (все что можно найти, может быть найдено в репозитории discovery.js). Но я верю это исправится в ближайшем будущем.


Шаринг "отчетов" по ссылке





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


JsonDiscovery доступен как расширение к Chrome и Firefox, и разрабатывается exdis как проект с открытым исходным кодом. Расширение построено на основе проекта Discovery.js, который еще на раней стадии разработки, но уже полезен для проектов вроде JsonDiscovery. Так что ожидается больше улучшений и фич в будущем. Следите за анонсами!

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 32

    +1

    Вещь полезная, кстати. Действительно, отличительное расширение. Особенно для изучения сторонних API, где документация не то, чтобы очень понятная или вовсе присутствует.


    Как я понял, вы связаны с автором проекта? Мне видится сомнительным использование (еще одного) языка запросов, можно ли там писать чистый JS?

      +2

      Кстати, аргумент про многословность — не такой уж и весомый, учитывая, что предлагаемое решение подразумевает знать новый синтаксис. Это повышает порог вхождения.


      Гораздо разумнее по моему мнению, было бы делать автоподстановки сниппетов и функций.
      Нужно отфильтровать? Вот кнопка "filter()", которая добавляет в цепочку кусочек кода и ставит курсор в нужное место.

        +5
        Как я понял, вы связаны с автором проекта?

        Так получилось, что я автор discovery.js и jora :)


        Мне видится сомнительным использование (еще одного) языка запросов, можно ли там писать чистый JS?

        Увы, нельзя. Я был бы рад не изобретать своего и использовать что-то готовое, но подходящего (по множеству параметров) не нашлось – так появился жора. Изначально его не было и все писалось на JS, но получалось много рутиного кода. Жора заточен под наиболее часты кейсы связанные с выборкой данных, облегчает манипуляции. Например, вам не надо заботиться о существовании всех свойств в пути (то что решит оператор ?. в JS, если его примут), или отобрать только уникальные значения, или сделать рекурсивную выборку и т.д. А за счет определенных ограничений, таких как отсутствие переменных (но есть "константы"), циклов и тд – позволяет делать интересные вещи, например, те же подсказки при вводе запроса. И есть еще несколько интересных идей. Посмотрите readme у Jora

          0

          jq чем не подошёл?

            0

            Ниже нашёл ответ

            0
            Отличный плагин!

            +1 в пользу поддержки jq и JMESPath — github.com/jmespath/jmespath.js
        +2

        А уж если вы добавите конвертацию YAML <-> XML <-> JSON — цены не будет расширению).


        Например, YAML порой более читабельный, нежели JSON. XML вообще невозможно понять без поллитра, взглянув на портянку. А JSON — как промежуточный и основной формат, так как наиболее распространен сейчас и прост для восприятия и анализа (глазами/кодом)

          +2

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

          0
          Интересное расширение! Только вот не хватает возможности отмасштабировать вывод плагина. Чтобы не увеличивать весь сайт.
            +2
            Спасибо за отзыв! Обязательно реализуем подобную функциональность! Также для ускорения процесса можете завести issue и следить за ходом работ.
            +1

            Может интереснее было бы поддержать синтаксис jq? Он многим известен и частично, интуитивно понятен, кроме того куча сниппетов на очень многие случаи жизни ?

              +1

              Технически в discoveryjs (на чем построено расширение) заложено возможность использования альтернативных "движков" для запросов. Можно подумать над тем, чтобы была возможность выбора движка в настройках (из списка). Но об этом нужно подумать дважды, так как усложняет и создает определенные проблемы, например с шарингом по ссылке.


              Если говорить конкретно про jq, то здесь основная проблема, что он написан на C и сборки для работы в браузере я не нашел (тот же playground шлет запросы к бекенду для выполнения запросов). И у него нет такой полезной вещи как подсказки при составлении запроса. И это не единственная фича, задуманная вокруг написания запросов (но первая реализованная).


              кроме того куча сниппетов на очень многие случаи жизни

              Есть какой-то общий сборник, или это личное собрание?

            0
            Так ведь нужно и редактирование добавить!
              0

              Можно, но зачем? Какой у вас кейс?

                0
                Для чего нужно редактирование JSON? Странный вопрос, но ладно:
                1. Редактирование файла-конфига
                2. От API внешнего пришел ответ в виде JSON, иногда нужно лишнее убрать/изменить.
                3. Свое тело запроса подготовить для Postman, к примеру.
                Все это можно и в IDE делать или в консоли браузера, но тут такие возможности!
                  0
                  Как мне кажется, самый правильный путь для п.3 — это уговорить ваших разрабов REST API поставить Swagger на сервере. И шаблоны готовые, и запросы можно через форму отправлять, и Postman на этапе разбора с Json не нужен.
                    0

                    К сожалению, тот же Swagger не умеет нормальную авторизацию OAuth2/OpenID Connect для stateless бэкэндов. Приходится отключать вообще фичу отправки запросов.
                    Там есть, конечно, возможность ввода токена ручками, но его нужно постоянно обновлять.

                      0

                      Поставить — не вопрос. Кто его поддерживать будет? :) И у нас, кстати, есть, бэк не очень горит желанием его поддерживать, а фронт и QA недовольны возможностями. Все хотят Postman, хотя я вообще не могу вообразить как его поддерживать. В теории могу представить два способа, но лично меня оба в ужас приводят, а сваггер лишь в обреченность.

                        0
                        Проблема саботажа со стороны одного из разрабов должна рассматриваться за пределами технического аспекта проблемы.

                        Нужно заставить бэка писать эндпойнты так, чтобы они самодокументировались через либу Swagger вашего серверного движка.

                        Суть использования Swаgger не в том, что можно через него создавать описание сервисов, а в том, что это описание автоматически создаётся и обновляется вместе с обновлением методов сервиса. Надо только соблюдать нотацию JSDoc, и нормальные линтеры и IDE обеспечивают проверку соответствия JSDoc и параметров методов.
                0
                Спасибо, полезная штука. уже сам хотел делать.
                еще бы в виде отдельного сервиса. сейчас приходится сохранять в файлы и открывать в браузере.
                  0

                  Можете описать ваш кейс? Пока лишь догадки, что именно вы хотите от сервиса...

                    +3
                    вставить свой json и получить форматирование фильтры и тд. просто не все джейсоны имеют свои url. может в плагине есть возможность вставить свой json? искал но не нашел
                      0

                      На этот случай делаем песочницу для jora. Проект в начальной фазе: сейчас туда можно загрузить или кинуть файл, и трансформировать его с помощью jora. В перспективе будет возможно вставлять из буфера, хелп и много всего другого.

                        +1
                        было бы еще очень круто если бы можно было скопировать путь до нужного элемента хотя бы в виде js выражения, или что-то типа хлебных крошек. когда работаешь с большими файлами и нужно достать какое то свойство из глубины, приходится рутинно искать всех родителей.
                        то есть выбираем ноду, и у нее где то написан полный путь к ней от корня или можно скопировать хотя бы. например:
                        seasons[5].episode[2].meta.actors[4].name
                  +1
                  Есть возможности изменить цветовую схему вывода? На пример чёрный фон и подходящая подсветка
                    0

                    Мы думали о цветовых схемах, но пока все было на уровне "nice to have", то есть без явного запроса/планов. Будет круто если создадите ишью, чтобы мы начали обсуждение по этому вопросу.

                    +5
                    В Firefox, начиная с 44 версии, стоит встроенный просмотрщик JSON, которые убивает любые поползновения плагинов показать JSON как-нибудь не так, как велит генеральная линия партии.
                    Чтобы JsonDiscovery нормально работал, надо отключить встроенный просмотрщик JSON: в about:config: devtools.jsonview.enabled = false
                      0
                      Их документация по разработке ссылается на валидатор json jsonlint.com, который умеет подгружать данные по ссылке.
                      +1

                      Я извиняюсь, но как это включить?
                      К примеру, открываю https://raw.githubusercontent.com/pdyck/hearthstone-db/master/cards/all-cards.json и получаю обычный неформатированный текст.
                      Тот же JSON Formatter автоматом всё форматирует и показывает.

                        +1
                        К сожалению сейчас есть проблемы с работой экстеншна на некоторых доменах GitHub из-за настроек CSP. Эту проблему мы постараемся решить как можно скорее, прогресс можно отслеживать в этой задаче.

                      Only users with full accounts can post comments. Log in, please.