JsonDiscovery: Changing a way we’re viewing JSON in a browser
Today, I would like to tell you about JsonDiscovery, a browser’s extension for viewing JSON. You‘ll probably say: “there are a lot of such extensions!”. Yeah, a lot of, but JsonDiscovery’s features make it different and really powerful.
Let’s take a closer look.
For the demos I used all-cards collection of Hearthstone-DB project (thanks to Olga Kobets for an idea). And that’s how it looks like when opened in a browser with JsonDiscovery installed:
At first glance, it’s just one more JSON highlighter. That’s because most features are not on surface to avoid disturb you from your JSON. Let’s reveal them:
- Easy JSON fragment copy to clipboard
- JSON structure signature
- JSON transformation with a query using Jora
- Suggestions on a query typing
- Customisation of JSON data presentation
- Report sharing by a link
Consider each of them in details.
JSON fragment copy to clipboard
Sometimes you need to copy a fragment of JSON, e.g. some nested object or array. It’s easy task with JsonDiscovery, as every expanded object and array have action buttons. And one of them is “ƒ” button, with options to copy JSON in compact or pretty form:
JSON structure signature
When you discovering a data, it’s useful to have a clue about its structure. Just hover a “𝕊” button in action bar on an expanded object or array and you’ll see structure signature of subtree like in TypeScript:
You also can hover a property or a value in the structure signature popup to get some details, e.g. used values for a field:
JSON queries
A click on “Make report” button moves you to a page where you can query to your JSON or/and customize its presentation.
Jora language is using for queries. Jora partially based on JavaScript’s 2015+ syntax, but has been created to be compact and express more (in term of a query).
Usually you only need to select a subset of data by using a path, e.g. foo.bar.baz. If a key contains prohibited characters just use [] (square brackets), e.g. foo['a key with whitespaces'] . That’s all like in JavaScript, except no need to bother about path existence:
A common case is to use a filter or/and a map. Jora offers .[] for filtering and .() for mapping:
Example on the screenshot above ( cards.[health].({ name, health })) can be written in JavaScript this way:
cards.filter($ => $.health).map($ => ({ name: $.name, health: $.health }))That is too verbose, isn’t it?
You can find more about Jora itself and its syntax on its repo on github. (Btw, it also has a CLI and a sandbox)
Suggestions on a query
This feature can’t be explained right. Just try it by yourself. At least once:
JSON data presentation
When you select a desired data, you can customise its look. For example, output it as a table, or a list, something like that:
Unfortunately, for now is lack of documentation about view description (all you can find currently, can be found on discovery.js repo). However, I believe it will be fixed in the nearby future.
Sharing a report with a link
That’s were most excited features in JsonDiscovery, but there are much more small features, because the extension and underling projects crafting with attention to details. And I can say for sure, it changes the way we’re viewing JSON.
JsonDiscovery is available as extension for Chrome and Firefox, and developing as open source project by Denis Kolesnikov. It’s based on Discovery.js project, which is on early stage of development, but already useful for projects like JsonDiscovery. So, more improvements and new features are coming soon.
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
