A simple JSON object editor using AngularJS

I want to develop a generic JSON editor, driven by json-schema. In preparation for that I developed a simple AngularJS directive editproperty. This directive lets you edit the object in a single line. Also implemented the new directive editobjectproperty. This displays the object and allows direct editing.

You can play with these directives here:

Note that the object keys are sorted.

This demo does not seem to work on Internet Explorer™ - the reason being IE does not like the directives as elements. May have to convert to directives as attributes.

You can download the implementation of the directive here. The implementation uses '=' (which sets up bi-directional binding) style scope to pass in the object from outer scope into the directive. Here is an excellent video by John Lindquist explaining the '=' scope. It also makes use of the $last variable of the ng-repeat directive to deal with comma formatting. I wish looping structures in all languages had some of these kinds of syntactic sugar such as first, last, non-first, even, odd.

BTW this was an excellent exercise in learning the recursive directive and template behavior of AngularJS.

Plunker

Try out

• Add
• Update
• Remove

use cases.

Well...you will say "What is the big deal? I can edit the JSON object as a simple text much faster"...and you would be right. The power of this will become apparent once I hook it up to JSON-schema. With that the property editor will only allow valid JSON object structure and property values in compliance with JSON-schema. I will be using this to implement Chrome Packaged App Manifest Version 2 Editor App.

I found Jsonary.com which is a similar concept. I will explore writing custom renderers using AngularJS and Twitter Bootstrap.

Todo

• Support object properties
• Support array properties  - partially done. I may have to write a new directive editarray .
• Support direct editing of property name and value in editobject tag
• Dropdown of existing properties to select from to edit or remove