jQuery 像属性浏览器一样工作的基于 GUI 或基于 Web 的 JSON 编辑器

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

提问by dreftymac

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:

假设您有一个任意的 JSON 结构，如下所示：

{
    '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?

问题：是否有基于 Web 的 JSON 编辑器可以采用这样的结构，并自动允许用户在用户友好的 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.

示例：想象一个自动生成的 HTML 表单，它为 title 和 lastmod 显示 2 个 input-type-text 控件，以及一个包含三列三行的 input-type-text 控件表，用于 arr_list ... 具有删除功能或通过单击表格中每一行旁边的 [+][X] 添加其他行。

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).

大创意：这背后的“大创意”是用户将能够指定任何任意（非递归）JSON 结构，然后还能够使用基于 GUI 的交互来编辑结构（这将类似于XML Spy 中的“XML 编辑器网格视图”）。

See also:

也可以看看：

• Is there a JSON api based CMS that is hosted locally?
• https://ux.stackexchange.com/questions/37237/treetable-as-a-flexible-condition-filter-editor

• 是否有本地托管的基于 JSON api 的 CMS？
• https://ux.stackexchange.com/questions/37237/treetable-as-a-flexible-condition-filter-editor

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

更新：（星期四 2014-07-31 18:31:11）

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

已创建 github 存储库以进一步跟踪此已关闭的 SO 帖子。

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

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

回答by dreftymac

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.htmlOutline 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/
• mb21.github.io/JSONedit, built as an Angular directive

• http://knockoutjs.com/documentation/plugins-mapping.html;; Knockoutjs.com 不错
• http://jsonviewer.arianv.com/;; 可爱的最小的离线工作
• http://www.alkemis.com/jsonEditor.htm; 这个看起来很不错
• http://www.thomasfrank.se/json_editor.html
• http://www.decafbad.com/2005/07/map-test/tree2.html大纲编辑器，不是真正的 JSON
• http://json.bubblemix.net/可视化 JSON 结构，内联编辑并导出回美化的 JSON。
• http://jsoneditoronline.org/StackOverflow 线程参与者添加的示例。来源：https: //github.com/josdejong/jsoneditor
• http://jsonmate.com/
• http://jsonviewer.stack.hu/
• mb21.github.io/JSONedit，作为 Angular 指令构建

Based on JSON Schema

基于 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/

• 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
• 生成 JSON Schema 的工具：http: //www.jsonschema.net
• http://metawidget.org
• 可视化 JSON 编辑器，Windows 桌面应用程序（免费，开源），http://visualjsoneditor.org/

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

商业（无意或暗示背书，可能满足也可能不满足要求）

• Liquid XML - JSON Schema EditorGraphical 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.

• Liquid XML - JSON Schema Editor图形 JSON 模式编辑器和验证器。
• http://www.altova.com/download-json-editor.html
• XML ValidatorBuddy- JSON 和 XML 编辑器支持 JSON 语法检查、语法着色、自动完成、JSON 指针评估和 JSON 模式验证。

jQuery

jQuery

• formbuilder jQuery drag and drop
• formeo
• shalotelli form_builder

• formbuilder jQuery 拖放
• 福尔梅奥
• shalotelli form_builder

YAML

YAML

• Konstellate Reddit Post

• Konstellate Reddit 帖子

See Also

也可以看看

• Google blockly
• 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/
• https://studio3t.com/knowledge-base/articles/visual-query-builder/

• 谷歌块状
• 是否有本地托管的基于 JSON api 的 CMS？
• 基于cms的概念；；http://www.webhook.com/
• 基于树的小部件;; http://mbraak.github.io/jqTree/
• http://mjsarfatti.com/sandbox/nestedSortable/
• http://jsonviewer.codeplex.com/
• http://xmlwebpad.codeplex.com/
• http://tadviewer.com/
• https://studio3t.com/knowledge-base/articles/visual-query-builder/

回答by Ether

Generally when I want to create a JSON or YAML string, I start out by building the Perl data structure, and then running a simple conversion on it. You could put a UI in front of the Perl data structure generation, e.g. a web form.

通常，当我想创建 JSON 或 YAML 字符串时，我首先构建 Perl 数据结构，然后对其进行简单的转换。您可以在 Perl 数据结构生成之前放置一个 UI，例如 Web 表单。

Converting a structure to JSON is very straightforward:

将结构转换为 JSON 非常简单：

use strict;
use warnings;
use JSON::Any;

my $data = { arbitrary structure in here };
my $json_handler = JSON::Any->new(utf8=>1);
my $json_string = $json_handler->objToJson($data);