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.

See also: http://stackoverflow.com/questions/998832/gui-based-or-web-based-json-editor-that-works-like-property-explorer — dreftymac, Oct 04 '12 at 21:55

score 5 · Accepted Answer · edited May 23 '17 at 12:16

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

score 1 · Answer 2 · edited May 23 '17 at 12:25

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

score 0 · Answer 3 · answered Apr 18 '12 at 20:42

0

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.

answered Apr 18 '12 at 20:42

Har

4,864
2
19
22

It makes sense, but I am looking for a more generic solution. Some of my objects are not even linked to a service, they are just consumed directly by my script. – Christophe Apr 18 '12 at 22:51
check out how Fiddler intercepts JSON – Har Apr 19 '12 at 14:16

score 0 · Answer 4 · answered Apr 18 '12 at 20:50

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 complicated (e.g. preselect "Line", have a default title etc) you will be back to the html (or a js representation of it).

thx, your object description is kind of what I was looking for. I was hoping to find a library for this, or at least learn about usual conventions (e.g. how to describe a drop-down vs. radio buttons). — Christophe, Apr 18 '12 at 21:02
No, thats html. select list, drop-down select list, radio buttons? You only said you'd like to have a choice between options. — Bergi, Apr 18 '12 at 22:06

JSON object GUI

4 Answers4