基于 gui 或基于 web 的 JSON 编辑器的工作方式类似于属性 explorer [ closed ]

Question

Background: This is a request for something that may not exist yet, but I've been meaning to build one for a long time. First I will ask if anyone has seen anything like it yet.

Suppose you have an arbitrary JSON structure like the following:

{
    'title_str':'My Employee List'
    ,'lastmod_str': '2009-June-15'
    ,'employee_table':[
        {'firstname':'john','lastname':'doe','age':'33',}
        ,{'firstname':'jane','lastname':'doe','age':'34',}
        ,{'firstname':'samuel','lastname':'doe','age':'35',}
    ]
}

Question: Is there a web-based JSON editor that could take a structure like this, and automatically allow the user to modify this in a user-friendly GUI?

Example: Imagine an auto-generated HTML form that displays 2 input-type-text controls for both title and lastmod, and a table of input-type-text controls with three columns and three rows for arr_list ... with the ability to delete or add additional rows by clicking on a [+][X] next to each row in the table.

Big Idea: The "big idea" behind this is that the user would be able to specify any arbitrary (non-recursive) JSON structure and then also be able to edit the structure with a GUI-based interaction (this would be similar to the "XML Editor Grid View" in XML Spy).

See also:

• Is there a JSON api based CMS that is hosted locally?

Update: (Thu 2014-07-31 18:31:11)

A github repository has been created to further track this closed SO post.

• https://github.com/dreftymac/stackoverflow.questions.998832

转载于:https://stackoverflow.com/questions/998832/gui-based-or-web-based-json-editor-that-works-like-property-explorer

Answer 1

Update: In an effort to answer my own question, here is what I've been able to uncover so far. If anyone else out there has something, I'd still be interested to find out more.

• http://knockoutjs.com/documentation/plugins-mapping.html ;; knockoutjs.com nice
• http://jsonviewer.arianv.com/ ;; Cute minimal one that works offline
• http://www.alkemis.com/jsonEditor.htm ; this one looks pretty nice
• http://www.thomasfrank.se/json_editor.html
• http://www.decafbad.com/2005/07/map-test/tree2.html Outline editor, not really JSON
• http://json.bubblemix.net/ Visualise JSON structute, edit inline and export back to prettified JSON.
• http://jsoneditoronline.org/ Example added by StackOverflow thread participant. Source: https://github.com/josdejong/jsoneditor
• http://jsonmate.com/

• http://jsonviewer.stack.hu/

• http://jsoneditoronline.org/

• mb21.github.io/JSONedit, built as an Angular directive
• cloudwall demo http://cloudwall.me/etc/json-editor.html
• json-gui with json-patch, xml, csv and yaml support

Based on JSON Schema

• https://github.com/jdorn/json-editor
• https://github.com/mozilla-services/react-jsonschema-form
• https://github.com/json-schema-form/angular-schema-form
• https://github.com/joshfire/jsonform
• https://github.com/gitana/alpaca
• https://github.com/marianoguerra/json-edit
• https://github.com/exavolt/onde
• Tool for generating JSON Schemas: http://www.jsonschema.net
• http://metawidget.org
• Visual JSON Editor, Windows Desktop Application (free, open source), http://visualjsoneditor.org/

Commercial (No endorsement intended or implied, may or may not meet requirement)

• Liquid XML - JSON Schema Editor Graphical JSON Schema editor and validator.
• http://www.altova.com/download-json-editor.html
• XML ValidatorBuddy - JSON and XML editor supports JSON syntax-checking, syntax-coloring, auto-completion, JSON Pointer evaluation and JSON Schema validation.

jQuery

• jQuery drag and drop

See Also

• Is there a JSON api based CMS that is hosted locally?
• cms-based concept ;; http://www.webhook.com/
• tree-based widget ;; http://mbraak.github.io/jqTree/
• http://mjsarfatti.com/sandbox/nestedSortable/
• http://jsonviewer.codeplex.com/
• http://xmlwebpad.codeplex.com/
• http://tadviewer.com/