Better living through bookmarklets: JSON prettifier

Posted on Nov 20, 2010 in IT, Web Dev | 7 comments

A while back I posted a bookmarklet on this blog that aimed to make life easier for a small group of web developers. Since then I’ve been looking for another web development “itch” that I could scratch with another bookmarklet. In my new position, I’ve been working with web services that return data in Javascript object notation, or JSON, format. Having spent far too long copy and pasting JSON into online “prettifiers,” it dawned on me that I’d found my itch and it was time to start scratching.

What’s the background?

You can learn all about JSON elsewhere on the web, but in brief: JSON is a lightweight way to organize data in key-value pairs. It’s easy to parse by the client—typically a web browser—because it’s in a format that it natively understands. There’s no need to parse the data as is the case with XML, another common format for data interchange. Another bonus with JSON it has virtually no structural overhead; it’s just keys and values.

What’s the problem?

When a web browser receives data in JSON format—which is in essence just plain text—it does what web browsers do with plain text: collapse out redundant whitespace and newlines. The result is a glob of text that, while perfectly semantic to a machine, is almost impossible to review by a person. And though JSON’s purpose is be a data-exchange format from one computer system to another, developers have to understand the structure of that data, too. Otherwise it’s difficult to code the services that generate it and the client scripts that consume it.

Happily, there are tools available that take in raw JSON code and display that same code with a nice, human-readable format. But that is inconvenient when debugging output during development. You need to copy the JSON, jump over to a separate browser window or tab, paste it, and have the tool parse it just to be able to review the structure and values.

What’s the solution?

In the future, perhaps browser developers will recognize pure JSON data and present it in such a way that it retains its indentation structure so as to be easier for a human to scan through. Firefox and IE do this today with XML data, providing an indented, collapsable presentation of the data.

Until then, I’m happy to present this bookmarklet that helps you do that today:

JSON “Prettifer”

To use it, simply drag the link below to your browser’s bookmark bar, where it will happily wait until you find yourself staring at a pageful of raw JSON. Then click it and smile as you can actually see what you’re staring at.

The inner workings are essentially two separate functions:

1. Most important is the Javascript JSON Formatter script,  Javascript code written by Jon Combe that performs the heavy lifting. It takes in the JSON string and recursively walks through it, applying the proper formatting to generate the “prettified” version we humans can quickly make sense of. I’m grateful to Jon Combe for sharing his code with the community.
2. Next is some basic DOM manipulation of my own devising. This code grabs the contents of the page—assumed to be raw JSON data returned from a feed or web service—and runs it through the JSON Formater script. The resulting “prettified” JSON is wrapped in the proper HTML code to preserve its formatting and then replaces the unformatted data.

These two features are packaged together as a bookmarklet for easy use. I must again recognize Tommy Saylor for his insightful Smashing Magazine article, Make Your Own Bookmarklets With jQuery, describing the method to create these handy little tools.

Related: If you liked this, check out:

1. Better living through bookmarklets; or, one-​​click switch between UW dev and production servers Bookmarklets are small scripts that live in your browser's bookmark...
2. Kotekitae, or better living through bruising Martial arts, as I have written about, isn't about being...
3. Night of the Living Dead (kids) Kids, I know, are desensitized to violence thanks to the...