Ivaylo Gerchev All things are difficult before they are easy.

Make reading JSON easy with JSON Hero

5 min read 1659

JSON is an important mechanism for data exchange in modern programming. Its text-based format and object-like syntax make it very convenient and easy for use in many programming languages. For example, JavaScript and PHP have built-in functions for handling JSON data.

Despite its usefulness, working with raw, long JSON files and navigating through rivers of text information can be hard, boring, and time-consuming.

Also, to see the actual data in action, you must first render it in your app; until then, you can’t tell for sure how the data (images, colors, dates, etc.) looks or if it even exists at all.

Fortunately, there are tools which can help with this issue. In this article, we’ll explore one such a tool called JSON Hero, a JSON viewer with superpowers. We will cover:

Json Hero Homepage Showing Feature Highlight And Json Data Entry Fields

First, let’s explore what JSON is and why we might need a viewer like JSON Hero.

What is JSON?

JSON stands for JavaScript Object Notation. It’s a text-based data interchange format and, as its name suggests, it’s based on JavaScript object literals. JSON can be used to exchange data between different platforms, computers, systems, etc.

We can easily convert JSON data coming from a server into JavaScript objects and vice versa. It is the preferred data interchange format in modern programming. Let’s go over the main features that make JSON so useful and popular.

JSON is lightweight. It’s designed to be as simple and concise as possible so that programmers can read and write JSON data structures effortlessly and efficiently.

JSON is text-based. This makes it completely language-independent. All major programming languages have some sort of functionality for working with JSON data, including Go, Rust, and other languages.

JSON is portable. This makes it a cross-platform file format. Using JSON, we can transfer data between different platforms and devices in a way that is compatible with all of them.

JSON data structures are easy to read both by machines and humans.

JSON is simple. Its syntax is super simplified compared to other data exchange formats such as XML.

XML vs. JSON

As mentioned in the above section, XML is another popular data interchange format you may already have heard of. But over time, JSON has come to displace XML because it is a way more powerful alternative.

Here are some other reasons why programmers tend to favor JSON over XML:

  • JSON doesn’t use complex syntax such as tags
  • JSON is shorter and faster to read and write
  • JSON is less verbose, which is better for data transfers
  • JSON can be parsed with standard programming language functions (to parse XML, we must use an XML parser)

Data structures in JSON

JSON supports two main data structures: objects and arrays. Both can be used in conjunction to build complex data representations.

This is a JSON object:

{
  "name":"David", 
  "age":33, 
  "hobby":null
}

As you can see, a JSON object is a collection of name and value pairs.



This is a JSON array:

["Tennis", "Karate", "Dancing"]

A JSON array is an ordered list of values.

We can use them together as well:

{
  "name":"David", 
  "age":33, 
  "hobbies":[
    "Tennis", 
    "Karate", 
    "Dancing"
  ]
}

JSON values must be of the following data types:

  • Null
  • Boolean
  • Number
  • String
  • Array
  • Object

Note that in JavaScript, values can be also a valid JavaScript expression, such as a function or a date.

Many programming languages provide functions for reading and generating JSON. For example, JavaScript has built-in functions for converting JSON strings into JavaScript objects (JSON.parse()) and for converting objects into JSON strings (JSON.stringify()).

What is JSON Schema?

One last thing needs to be mentioned before we move on to the JSON Hero. It’s called JSON Schema.

JSON Schema is a way to validate a particular JSON file. Any JSON file can be validated against JSON Schema by checking:

  • If the data types of values are correct. If we expect a string, the value must be string
  • If the required data exists
  • The correct format for values and data, such as ranges or min and max values

In other words, the purpose of JSON Schema is to ensure that the data conforms with a set of defined rules.

Note that JSON Schema is not used for syntax validation — we can use a JSON Validator for that — but for validating the data itself.

What is JSON Hero?

We saw already how useful JSON can be. However, there are some difficulties we may face while working with JSON. For example, it can be hard to:

  • Navigate into large JSON files
  • Imagine what the data will look like before we actually render it in some way
  • Explore related values

All of the above issues are addressed in JSON Hero viewer. It makes working with JSON easy because it provides:

  • Concrete and visual representation of the “abstract” raw JSON data
  • Related values for a selected field
  • Different ways to easily navigate through large and complex JSON files
  • JSON Schema so you can validate your JSON data

Getting started with JSON Hero

You can start using JSON Hero right away in your browser. You don’t need to install anything. Just go to the app website and enter a JSON URL or upload a JSON file, as shown in the image below:

Section Of Json Hero Homepage With Fields To Enter Json Url, Paste Json Data, Or Upload Json File

The viewer will load the JSON data and you can start exploring the document instantly.

To make this even easier and more convenient for your workflow, you can install the JSON Hero extension for VS Code.

Once you have the extension installed, you can load a JSON file directly from your VS Code editor. Open a JSON file you want to explore and then run the View in jsonhero.io command from the command palette:

Opened Json File In Json Hero With View Command Being Run

The file will be loaded into the JSON viewer automatically by using your default browser.


More great articles from LogRocket:


Exploring JSON Hero features

In this section we’ll explore all of JSON Hero’s features.

Live preview for JSON data

The first and most expressive feature of JSON Hero is the ability to preview the data from any field in a JSON document — if a preview can be generated. This live preview feature supports many types of data, including images, videos, URLs, colors, and dates.

Let’s look at some examples of the live preview feature. The first example below shows how JSON Hero generates image previews:

Json Hero Image Preview Example Showing Image Source And Preview Of Image

This is quite useful because you can see how the actual image will looks like when it’s rendered.

The next example shows how JSON Hero generates color previews:

Json Hero Color Preview Showing Visual Example Of Color, Various Color Modes, And Other Info

You can see how the color looks instantly. Plus, you get additional information about the color in the “Properties” section, including other color modes, luminosity, and contrast ratio.

The last example shows how JSON Hero generates date previews:

Json Hero Date Preview With Date Represented In Various Ways, Including Calendar View

Here, we get an easy-to-read calendar view for the selected date field. We can also see additional useful info, again found in the “Properties” section.

Besides these cool previews, JSON Hero makes it easy to see what data to expect by prepending an appropriate icon for each field.

As you can see, JSON Hero provides richer information about the data instead of just raw chunks of text.

JSON Hero provides three data views, making it easy to navigate through the JSON document.

By default, JSON Hero displays the Column view, which is pretty similar to the MacOS Finder way of navigating:

Json Hero Default Column View Displaying Document Data

The second view is the raw JSON view:

Json Hero Raw Json View Showing Raw Json Data

In this view, you can select individual lines and get info about the corresponding field.

The third view is Tree view:

Json Hero Tree View With Vertical Expansion And Collapse Options For Field Groups

In this view, you can explore the JSON document in a vertical direction by expanding or collapsing any of its field groups. You can also move up and down through individual fields by using the arrow keys in your keyboard.

Searching a JSON document

In a long JSON file, it can be hard to find the field or fields you want. JSON Hero offers full document-searching capability with fuzzy matching so you can find any field within a second.

Take a look at this search function in action below:

Json Hero Search Function In Popup Modal

Keyboard shortcuts are also available, which make it even easier to search your JSON document.

Another useful feature is that JSON Hero shows related values to a selected field.

Let’s say your JSON file has a field type named username in its records. When you select one field, JSON Hero lists the values for all fields with the same name, making it easy to extract the needed information:

Json Hero Displaying Selected Field And Related Values

In the image above, you can see how we automatically get all values related to username fields.

Automatically generate JSON Schema

Another gem JSON Hero provides for us is that it automatically generates JSON Schema for the JSON document being viewed, as shown in the image below:

Automatically Generated Json Schema Displaying File Structure

This feature enables us to see exactly how a JSON file is structured.

Sharing JSON files

The final JSON Hero feature we will review is the ability to share your JSON file with anybody by simply copying the generated link when you load your file. To get the link, click on the “SHARE” button and copy the link.

Json Hero Share Feature Displaying Popup Modal On Click Of Share Button With Options To Copy Link Or Include Path To Exact Location

If you want the document to be opened at your exact current path, check the “Link includes path” field.

Conclusion

Bearing in mind its name — JSON Hero — we can compare using this JSON viewer to reading a comic book instead of a regular text-based book.

JSON is a useful and flexible data format, but reading it comes with some challenges. With JSON Hero, you can explore and share your JSON files in a much more visual and contextual way. So, grab your JSON and enjoy reading it with JSON Hero.

: Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to find out exactly what the user did that led to an error.

LogRocket records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

.
Ivaylo Gerchev All things are difficult before they are easy.

Leave a Reply