Format Description
The JSON format is an acronym for Javascript Object Notation; convenient to use, both for the computer and for the user. How to open a popular JSON file online or on your computer?
Douglas Crockford made this type popular in 2001. According to another version, the format was not invented, but “discovered.” And although the invention is attributed to Douglas Crockford, in a presentation to developers from Yahoo! Crockford revealed that JSON had been used even earlier in the Netscape browser in 1996.
Javascript technology uses data structures identical to JSON records. Douglas originally decided that JSON would be a component of Javascript and named it accordingly. But since JSON files consist of commas, parentheses and data, they are convenient to transfer to any technical platform and in other programming languages.
JsonDiscovery: Changing the experience of viewing JSON in the browser
Today I want to talk about JsonDiscovery, a browser extension for viewing JSON. Perhaps you will say: “we already have a lot of similar extensions!” Yes, it's full, but JsonDiscovery's features set it apart from others and make it truly powerful.
Let's take a closer look...
For the demos, I used a JSON file of a collection of all cards from the Hearthstone-DB project (thanks to Olga Kobets for the idea). And this is what it looks like if you open it in a browser with JsonDiscovery installed:
At first glance, it's just another JSON colorizer. This is because most of the features are not on the surface, so as not to distract you from your JSON. Let's reveal them:
- Simple copying of JSON fragments to a buffer
- JSON structure signature
- JSON Transformation Using Query
- Tips for writing a JSON query
- Setting up displaying data from JSON
- Sharing “reports” via link
Let's consider each point in more detail.
Simple copying of JSON fragments to a buffer
It happens that you need to copy a JSON fragment, that is, some nested object or array. With JsonDiscovery this is an easy task as each expanded 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're studying data, it's helpful to have an idea of its structure. Just hover over the "S" button in the action bar on an expanded object or array and you will see the signature of the subtree structure, which is what it looks like in TypeScript:
You can also hover over a property or value type in the structure signature to get some details, such as what values were used for the field:
JSON queries
Clicking on the “Make report” button takes you to a page where you can make requests to your JSON and/or customize its display:
The Jora language is used for queries. It is partly based on JavaScript 2015+ syntax, but is largely designed to be compact and express more (within the data query task).
Usually you only need to select some subset of the data using some path, like foo.bar.baz. If the key has illegal characters just use [] (square brackets), i.e. foo['a key with whitespaces']. Everything is like in JavaScript, except that you don't have to worry about 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 query
This feature cannot be described correctly. You need to try this yourself. At least once:
Setting up data display
Once you have selected the required data from JSON, you can customize its display. For example, display them in a table or 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 this will be corrected in the near future.
Sharing “reports” via link
These were the most impressive features of JsonDiscovery, but there are many more smaller features because the extension and the projects behind it are built with attention to detail. And I can say with confidence, it changes the entire experience of working with JSON in the browser!
JsonDiscovery is available as an extension to Chrome and Firefox, and is developed by exdis as an open source project. The extension is built on top of the Discovery.js project, which is still in its early stages of development but is already useful for projects like JsonDiscovery. So expect more improvements and features in the future. Follow the announcements!
How to open online
The following online services will help with opening JSON files:
- www.jsoneditoronline.org At the top, go to the menu: click “Open”, select “Open from disk” (if the file is downloaded and opened from a computer), or “Open url” (if the file is stored “in the cloud”). New files of this format are immediately saved and created, which is practical;
- www.countwordsfree.com We go to the site in the “JSON viewer” section on the left and select either “Load from Disk” or “Load from url” (depending on where the document is stored - locally or “in the cloud”). Among the additional nuances of the service: translation from JSON format to xml, as well as to plain text.
These are not the only solutions to work with. The Internet is full of similar sites. Choose any one.
Online services for opening
You can also open the code using online services. So, you can use JSON EDITOR ONLINE. You can open or create files in it. Just select the desired command at the top of the screen.
Mobile dating application RusDate - find your soulmate
Another online service will be Count Words Free, JSONVIEWER section. Here you need to choose to download the document from disk or cloud. You can view the contents in the main window.
How to open on PC
When you open a JSON file in a text editor, the information is typically displayed, but in plain text, in black letters on a white background. If the file is large, reading will be uncomfortable. We are talking about the lack of syntax highlighting.
To open and edit, programs such as:
- Notepad, Notepad++, etc. – for Windows;
- Apple TextEdit, MacVim, etc. – for MacOS;
- Vim, Pico, etc. - for Linux.
The lack of syntax highlighting is a significant inconvenience for reading if the file is large. How to open JSON files with highlighting on Windows 7? There are special programs for such cases: Sublime Text, Atom, Notepad++.
To view JSON files, right-click on the document and select “Open with” – “Select program…” – “Browse”. Next, find the executable file of a suitable text editor and click “OK”. Don't forget that the file suffix at the end is not .txt, but .json.
Programs for opening
Each user can open this format on their computer. To do this you will need a regular notepad or web browser . In the document you can see all the information that is stored in it.
A file with this extension is opened not only for reading. The user can change some data if necessary. However, it is not recommended to make any amendments without knowing its features. This may result in the application not working properly or losing important data.
In order to correctly open the JSON format on a computer, it should be opened in the program or service to which it belongs. The user will not be able to understand the essence of the content if he does not know what it refers to and what data is stored in it.
What are utilities and what are they for?
Altova XMLSpy
Altova XMLSpy is a development environment for various applications. The utility works with various formats, including XML and JSON. Also, the program works with various databases .
Opening in Altova XMLSpy occurs as follows:
- Launch the application and select the function File - Open .
- Go to the location of the desired file and select it.
- View the contents in the central window .
This utility also has disadvantages. First of all, this concerns the fact that it is paid. The user is provided with a 30-day trial period . Also, the program has many functions. Therefore, it may seem difficult to use, despite the clear interface.
Notepad++
One of the best applications for opening JSON is Notepad++. It is a regular notepad, but with a large set of functions . There are no multiple windows or additional features. But the software is great for opening, creating or editing.
Step-by-step instruction:
- Launch Notepad++ and go to File - Open .
- Find the desired element in Explorer.
- Review the contents of the file.
The utility can be installed absolutely free. It has a simple and clear file. But the program will take time to load the “heavy” document.
AkelPad
Another simple editor, but from a Russian developer. AkelPad provides the user with a simple interface, high power and a useful set of functions . This is enough to open the JSON format.
To view the contents of the file you need:
- Open the program and go to File - Open .
- Select a document and click on the appropriate button. A preview of the content will also be available here.
- Review the information in the main window.
The free utility supports various plugins. But large documents will take some time to open.
Komodo Edit
Komodo Edit has a large set of functions that programmers need to work. But the utility allows you to simply open the JSON format. To do this, select the “ Open file ” function in the main window. After this, an explorer will open in which the user needs to set the path to the desired element.
How does technology affect the way we sleep?
All content will be displayed on the main screen. The program is distributed only in English localization . Here you can not only read the text, but also check the syntax.
Sublime Text
Sublime Text is another representative of editors who are focused on creating code in their work. However, the utility's interface is much clearer. To open JSON you need:
- Launch the program and go to the section File - Open File .
- Find the folder with the document and open it.
- Familiarize yourself with the contents of the document .
The software is provided free of charge, but only in English. In addition, from time to time a message is displayed on the screen asking you to buy a license . But the free version will not differ in functionality from the paid one.
NFOPad
NFOPad is a regular notepad. But it can also be used to run JSON. To do this, just open it and go to the “ File ” tab, then select “ Open ”.
In the Explorer window, go to the folder with the desired document. If it is not at the given address, you need to change the type to “ All files ”. Once opened, the JSON content will be displayed on the screen.
Notebook
If the user does not have the opportunity to download an additional application, he can use the standard Notepad . The editor is available on all computers running Windows.
The document opens in the standard way. Just go to the “ File ” tab and select the “ Open ” command. After this, you need to set the path and run the JSON itself. In the notepad, you can not only view the content, but also edit it.
JSON file problems
Even after learning how to open the JSON format, you may encounter an error. This is probably due to an incorrectly assigned program. Go to the file menu again, click “Open with” - “Select program...” and find the desired editor for this format. Set "Use this application for all JSON files".
There are also damaged files. Sometimes this happens when downloading and transferring data on the Internet. If necessary, download the file again from another source.
