JsonDiscovery: Changing browsing experience for JSON

Today I want to talk about JsonDiscovery , a browser extension for viewing JSON. Perhaps you will say: “we have so many similar extensions!” Yes, it is complete, but the features of JsonDiscovery distinguish it from others and make it really powerful.

Let's take a closer look ...

For demonstrations, I used the JSON file for the collection of all the cards from the Hearthstone-DB project (thanks to Olga Kobets for the idea). And here is what it looks like if you open it in a browser with JsonDiscovery installed:

At first glance, this is just another JSON paintbrush. This is because most features are not on the surface, so as not to distract you from your JSON. Let's reveal them:

• Easy copy JSON fragments to clipboard
• JSON structure signature
• Transforming JSON with a Request
• Tips for writing a JSON request
• Setting data display from JSON
• Sharing "reports" on the link

We consider each item in more detail.

Easy copy JSON fragments to clipboard

It happens that you need to copy a fragment of JSON, that is, some nested object or array. With JsonDiscovery, this is a simple task, as each deployed object and array has action buttons. One of them is the “ƒ” button, by clicking which you can copy JSON in a compact or formatted form:

JSON structure signature

When you study data, it is helpful to have an idea of ​​their structure. Just point to the “S” button in the action bar on the expanded object or array and you will see the signature of the subtree structure, something like this looks like in TypeScript:

You can also point at a property or type of value in the structure signature to get some details, for example, about what values ​​were used for the field:

JSON Requests

Clicking on the “Make report” button takes you to a page where you can make requests to your JSON and / or configure its display:

For queries, the Jora language is used . It is partly based on the syntax of JavaScript 2015+, but to a greater extent, it is intended to be compact and express more (as part of the task of querying data).

Usually you only need to select a subset of the data using some path like foo.bar.baz . If the key has forbidden characters, just use [] (square brackets), that is, foo['a key with whitespaces'] . Everything is like in JavaScript, except that you do not need to worry whether the path exists or not:

It is often necessary to use filtering or mapping. Jora provides .[] For filtering and .() For mapping:

The example in the screenshot above ( cards.[health].({ name, health }) ) can be written in JavaScript like this:

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

Which is much more verbose, isn't it?

You can find more about Jora itself and its syntax in its github repository. (By the way, it also has a CLI and sandbox )

Tips for writing a JSON request

This feature cannot be described correctly. You need to try it yourself. At least one time:

Data Display Settings

When you have selected the necessary data from JSON, you can configure its display. For example, display them in a table, or a list, like this:

Unfortunately, at the moment there is not enough documentation on how to describe the mapping (all that can be found can be found in the discovery.js repository ). But I believe it will be fixed in the near future.

Sharing "reports" on the link

These were the most impressive features of JsonDiscovery, but there are many more smaller features, because the extension and the underlying projects are created with attention to detail. And I can say with confidence that all this changes the experience with JSON in the browser!

JsonDiscovery is available as an extension to Chrome and Firefox , and is being developed by exdis as an open source project. The extension is based on the Discovery.js project, which is still at an early stage of development, but is already useful for projects like JsonDiscovery. So more improvements and features are expected in the future. Follow the announcements!