基于 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 表单，其中显示 title 和 lastmod 的 2 个输入类型文本控件，以及 arr_list 的一个包含三列三行的输入类型文本控件表。 .. 能够通过单击表中每行旁边的 [+][X] 来删除或添加其他行。

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

另请参阅：

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

更新：(Thu 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 指令构建

< strong>基于 JSON 架构

• https://github.com/json-editor/json -编辑器
• 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 架构编辑器 图形 JSON 架构编辑器和验证器。
• http://www.altova.com/download-json-editor.html
• XML ValidatorBuddy - JSON 和 XML 编辑器支持 JSON 语法检查，语法着色、自动完成、JSON 指针评估和 JSON 模式验证。

jQuery

• formbuilder jQuery 拖放
• formeo
• shalotelli form_builder

YAML

• Konstellate Reddit 帖子

另请参阅

• Google blockly
• 是否有本地托管的基于 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);