Valid and Readable JSON Data

There are plenty of online tools that will validate your JSON data and also format that data. But what if you are offline? What if your data has sensitive information in it?

You can do the same validation and formatting with Sublime Text. This is both offline and will not expose your sensitive data.

If you are new here make sure you read both:

Web Hosting

Install Pretty JSON

OK, it’s time to install “Pretty JSON”.

With Sublime Text open, type CTRL + SHIFT + P to open the command palette. In the menu that opens, type “Install Package”. You should see the option for “Package Control: Install Package”. If you don’t visit the link above to install Package Control.

Once the next menu appears, type “Pretty JSON”. Select it and wait for a minute or so for it to install.

Now type CTRL + SHIFT + P one more time. In the menu type “Pretty JSON”. You should see a list of options that look like this.

Sublime Pretty JSON MenuAwesome! The installation was a success and we can use Pretty JSON now.

Validate JSON

Here is a bit of JSON data for you to use for the following sections.

{
  "FirstName" : "Bob",
  "LastName" : "Jones",
  "FavoriteFood" : "Pasta"
}

The JSON data that I gave you is super simple, so it should be easy to visually identify any errors. But what if there are 50 lines or 100 lines of data.

Finding a missing colon, comma, or curly bracket can be time-consuming and tedious. And you may not even know that you are missing anything. All you know is there is something wrong with your application or your data.

Open up a new tab in sublime text. Paste in the JSON data I provided. Press CTRL + SHIFT + P to open the command palette. Enter “Pretty JSON” into the menu.

Choose the option that reads “Pretty JSON: Validate”. You should see a little alert telling you “JSON is Valid”. Awesome!

Sublime Pretty JSON Valid

 

Now, let’s break our JSON so it becomes valid. Simply remove the last double quote from the string “Pasta”. Open the command palette again. Type “Pretty JSON”. Select the “Validate” option.

This time you will see 2 things. The first is that the prompt now reads “Invalid JSON”. Now you know there is something wrong with your data.

Sublime Pretty JSON Invalid

The second thing you will notice is that the data has an outline around the part of the data that has the error.

Sublime Pretty JSON Invalid Highlited

You have not only validated that your data is messed up, but you also know where the error is.

Keep in mind, just like any code errors, the highlighted area is not always guaranteed to be the exact line where the error is. The error may actually come before the line. But you are in the general area so you should be able to quickly identify the issue.

Go ahead and fix your data so that we can move on to the next section.

Pretty and Minified JSON

Ok. You should have memorized the commands to view the list of utilities that Pretty JSON offers. If now I will give it to you one more time.

Press CTRL + SHIFT + P. Enter “Pretty JSON” into the menu.

This time around we are looking at the “Format (Pretty Print) JSON” and “Minify (compress) JSON” options.

Choose the “minify” option. Your JSON data should all be collapsed into one line.

{"FirstName":"Bob","LastName":"Jones","FavoriteFood":"Pasta"}

Now choose the “pretty” version. Your JSON data should be on multiple lines.

{
  "FirstName": "Bob",
  "LastName": "Jones",
  "FavoriteFood": "Pasta"
}

So, why is this useful? The minified version is the usual format that you will see JSON data on the web. The reason behind this is that it saves space which in turn reduces the file size. Smaller files result in faster downloads and a faster site overall.

The pretty version is for readability. The JSON that we have is only a few lines, but imagine reading JSON that is hundreds of lines. The minified version would compress all one hundred lines into a single line.

I want to point out one more thing that happens when you minify or pretty print your JSON data with this tool. Go ahead and make the JSON invalid one more time. Now try to minify or pretty print. It didn’t work, right? Well the Pretty JSON package automatically checks for validity before trying to format the data. You won’t get an alert error, but the error will be highlighted.