A Web Page for Reformatting JSON Text, using AngularJS

A little over a year ago, I published A Web Page for Reformatting JSON Text, which is a simple web page for pretty-printing JSON data. I'm now learning AngularJS, so as an exercise I reimplemented the page using Angular rather than the original's jQuery.

This version is a little nicer than the original in the following ways:

  • You can type or paste text into the top box and the formatted JSON immediately appears in the lower box. There is no longer a need to press a Format button because Angular's data-binding mechanism takes care of automatically updating the output whenever the input changes. (This is possible with jQuery too, but takes more work.)
  • You can control the indentation width of the formatted JSON.
  • When the input is not valid JSON, the output panel changes its background color to red when displaying the error message.

Here it is: JSON Formatter with AngularJS

Short link: http://bit.ly/formatjson

You can look at the full source here: Gist

or as a fiddle: http://jsfiddle.net/oldmankris/qK9LK/

If don't know anything about AngularJS, but are curious about it, look at the source and note the following:

  • The magic of Angular comes from the ng- attributes attached to HTML elements. There is no need for a separate template language or explicit DOM manipulation.
  • The ng-app attribute attached to the html element sets up the module that contains our app's code.
  • The ng-controller attribute attached to the div element defines which controller function to use.
  • The ng-model attribute attached to the first textarea element binds its content to the inputText variable
  • The ng-bind attribute attached to the second textarea element binds its content to the value of the outputText variable, and the ng-class attribute binds its CSS class to the value of the outputClass variable.
  • The ng-options and ng-model directives on the select element bind it to the indentOptions and selectedIndentOption variable.
  • In the controller code, we set initial values for the inputText, indentOptions, and selectedInputOption variables, and then use $scope.$watch() to update the values of outputText and outputClass whenever any of the inputs change.

A Web Page for Reformatting JSON Text

After I published my OS X Automator Service for Reformatting JSON Text, one commenter said that he always uses http://jsonformat.com/. I have used that, but I hate the output it produces. Its output is more readable than JSON with all the whitespace stripped out, but not by much.

It also seemed a little silly for such a web page to require a back-end service to do the work. I figured I could whip up a simple web page that wouldn't require any server round-trips to do its work, and that produced reformatted output that wouldn't make me cry.

Here it is: JSON Reformatter

You can look at the source here: https://gist.github.com/kristopherjohnson/5073681


Update 2014-05-29: New version, implemented using AngularJS: http://undefinedvalue.com/2014/05/28/web-page-reformatting-json-text-using-angularjs

An OS X Automator Service for Reformatting JSON Text

Note: This is an old post. I now use jq (http://stedolan.github.io/jq/) instead of the formatjson Node script described below, and I recommend that you do too.

I had some JSON files that were not indented consistently. I edit these files by hand, so I wanted a way to easily reformat them.

My text editor has a reformatting command, but I really hate what it produces, so I decided to make my own JSON reformatting service for OS X that I could use in any application.

Syndicate content