JSON object GUI

Question

I'd like to offer my users an interface to edit JSON objects.

For example I have a JavaScript that calls Google charts with the following options:

var options={
    chartType: "Pie",
    title:"Chart title",
    is3D:false,
    width:500,
    height:300,
};

Ideally my users should be able to modify the options themselves without having to look into the code. They would be presented with a UI automatically built from the object, where:

• chartType is a select (Pie, Line, Bar)
• title is a text input
• is3D is a checkbox
• etc.

Are there libraries for this? If not, any suggestion to get started?

I could of course build the form manually, but the idea is to have a generic solution that works for any object.

Answer 1

I found this link with conventions for describing JSON: http://www.json-schema.org/

Searching for "JSON schema" led me to a number of solutions, and in particular this post:

GUI-based or Web-based JSON editor that works like property explorer

It was started two years ago, but is apparently well documented and kept up to date.

Also, a post from April 2012 on the ibm website:

http://www.ibm.com/developerworks/library/wa-jsonschema/index.html?cmp=dw&cpb=dwwdv&ct=dwnew&cr=dwnen&ccy=zz&csr=040512

Answer 2

Problem

How to provide a user-friendly means of constructing arbitrary JSON structures where:

• the user interface is intuitive, flexible and capable of use without developer-level technical proficiency
• the user interface can be inferred from the structure of the JSON
• modifications to the user interface require little or no developer intervention
• modifications to the underlying JSON structure can automatically trigger modifications to the corresponding user interface

Solution

If this is the basic premise of the question, this approach does appear to be possible using any of various approaches under the "MVVM" nomenclature (which is apparently a variant of the "MVC" meme).

Examples

http://knockoutjs.com/examples/cartEditor.html http://en.wikipedia.org/wiki/Model_View_ViewModel#Open_source_MVVM_frameworks

See Also

GUI-based or Web-based JSON editor that works like property explorer