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.

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.

• javascript
• json
• user-interface

• 1 See also: stackoverflow./questions/998832/… – dreftymac Commented Oct 4, 2012 at 21:55

4 Answers 4

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

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./developerworks/library/wa-jsonschema/index.html?cmp=dw&cpb=dwwdv&ct=dwnew&cr=dwnen&ccy=zz&csr=040512

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./examples/cartEditor.html http://en.wikipedia/wiki/Model_View_ViewModel#Open_source_MVVM_frameworks

See Also

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

Write a webform to detect the parameters of the a service. Once you have the parameters, generate your form based on parameters available. Submit your form and grab the JSON Result.

Na, you will need to build the form yourself. HTML forms are just a way to describe requirements for properties (of a request), and their serialisation will just return the desired object. In your example it would be

<select name="chartType"><option value="Pie"/><option value="Line" />...</select>
<input type="text" name="title" />
<input type="checkbox" name="is3D" />
<input type="number" name="width" />

etc. Forms also allow you to describe patterns, min/max-values, default values and everything such a library would handle. You might find a library that turns a simple

{
    chartType: ["Pie", "Line", "Bar"],
    title:"string",
    is3D:"boolean",
    width:"number"
}

into the above html and provides a crossbrowser serialisation function, but when it gets more plicated (e.g. preselect "Line", have a default title etc) you will be back to the html (or a js representation of it).