Code Folding for JSON Data

May 1, 2020

In Pair Programming sessions, we often exchange tips and tricks. Regardless of experience and title, there is a decent chance for new insights. Today in this blog post, I share my ideas, how to deal with large structures of data encoded in JSON.

Most of my peers complain about the problems, to be on the correct level of the curly braces. With the proper knowledge, it won't be a problem anymore.

Dealing with masses of data and their interchange has the danger to overlook all details. Sometimes handy development tools like IntelliJ or atom.io have neat code folding features, that empower us, developers, data analysts and scientists to keep the overview on the appropriate level.

JSON (JavaScript Object Notation) is an open data interchange format that has become one of the most accepted industry standards. JSON Data have no restrictions on structure or hierarchy. Comparing data or skimming through the data formation may result in a complete loss of oversight.

Example

We use the index mapping of metricbeat as an example. The index mapping is JSON encoded, and we demonstrate the robust code folding feature of IntelliJ and atom.io to maintain an overview. Having everything insight, you can move on from there for further orientation.

index-mapping.json in IntelliJ

I present the feature with IntelliJ and atom.io. Other development tools like also support code folding. Please look in their documentation.

Shortcuts for Linux also work for Windows.

IntelliJ

IntelliJ provides a useful shortcut to search for actions.

OS Shortcut
Linux CTRL + SHIFT + A
MacOS + SHIFT + A

MacOS

If you have macOS Catalina, you might have a binding conflict. Either you assign the IntelliJ action a new shortcut or disable the MacOS shortcut. To disable uncheck the shortcut in Settings ⇒ Keyboard ⇒ Shortcuts.

Disable Keyboard Shortcut

Search for Code Folding Actions

Open the Find Action dialogue. Enter code fold into the search dialogue, and you will receive a list of code folding actions.

Code Folding Actions

For each action, you can find the respective shortcut, and after the work gets executed, you see the folded output.

atom.io

atom.io uses another shortcut for the find action dialogue.

OS Shortcut
Linux CTRL + SHIFT + P
MacOS + SHIFT + p

In our following example, we use split panes for comparison.

Find action in atom.io

If you enter fold, the folding actions will appear. You can apply it the action to any side of the pane.

Compare folded structure

On the left, you can keep the level of detail, and on the right, you can traverse deeper, for instance, into the Kafka properties.

Using Shortcuts

Using the shortcuts to indent for each level will efficiently increase your work. The shortcuts are not hard to learn and easy to forget. You will benefit from quick usage. You can always use the find action dialogue, to get back to that folding action. This tip is an important starting point to memorize. With it, you can find any desirable editor action you search.

Summary

The code folding feature for JSON is beneficial, especially dealing with lots of information. If you have to investigate lots of data and nested levels, always go step by step. Reducing complexity is the right approach to digest data easily. Code folding is a vital tool to support that. Any editor should be capable of that, but you know for sure that IntelliJ and atom.io support it.

About the author: Vinh Nguyên

Loves to code, hike and mostly drink black coffee. Favors Apache Kafka, Elasticsearch, Java Development and 80's music.

Comments
Join us