jquery - 基于 GUI 或基于 Web 的 JSON 编辑器，类似于属性浏览器

Question

背景：这是对可能尚不存在的东西的请求，但我一直想建造一个。首先，我会问是否有人见过类似的东西。

假设您有一个任意 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',}
    ]
}

问题：是否有基于 Web 的 JSON 编辑器可以采用这样的结构，并自动允许用户在用户友好的 GUI 中对其进行修改？

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

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

也可以看看：

• 是否有本地托管的基于 JSON api 的 CMS？
• https://ux.stackexchange.com/questions/37237/treetable-as-a-flexible-condition-filter-editor
• JSON 编辑器
• YAML 图形用户界面

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

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

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

Answer 1

更新：为了回答我自己的问题，这是我迄今为止能够发现的。如果其他人有什么东西，我仍然有兴趣了解更多。

• http://knockoutjs.com/documentation/plugins-mapping.html ;; knockoutjs.com 不错
• http://jsonviewer.arianv.com/ ;; 可爱的最小的离线工作
• http://www.alkemis.com/jsonEditor.htm；这个看起来不错
• 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 指令

基于 JSON 模式

• https://github.com/json-editor/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
• Visual JSON 编辑器，Windows 桌面应用程序（免费，开源）， http: //visualjsoneditor.org/

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

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

jQuery

• formbuilder jQuery拖放
• 福美欧
• shalotelli form_builder

YAML

• Konstellate Reddit 帖子

也可以看看

• 谷歌阻止
• 是否有本地托管的基于 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/

Answer 2

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

将结构转换为 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);