基于 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 控件，以及一个包含三列和三行的 input-type-text 控件表对于 arr_list ... 可以通过单击表格中每一行旁边的 [+][X] 来删除或添加其他行。

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

另请参阅：

• 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-editor
• YAML GUI

更新：（2014 年 7 月 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 模式的工具：http://www.jsonschema.net
• http://metawidget.org
• Visual JSON 编辑器，Windows 桌面应用程序（免费，开源），http://visualjsoneditor.org/

商业（没有任何意图或暗示的背书，可能符合也可能不符合要求）

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

jQuery

• formbuilder jQuery drag and drop
• formeo
• shalotelli form_builder

YAML

• Konstellate Reddit Post

另见

• Google blockly
• Is there a JSON api based CMS that is hosted locally?
• 基于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，例如一个网络表单。

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