关于jquery：基于GUI或基于Web的JSON编辑器，其作用类似于属性资源管理器


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

背景：这是一个对可能还不存在的东西的请求，但我已经打算建立一个很长一段时间了。首先，我会问是否有人见过类似的东西。

假设您有如下任意的JSON结构：

1
2
3
4
5
6
7
8
9
{
    '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表单，它为标题和lastmod显示两个输入类型文本控件，并为arr_列表显示一个包含三列三行的输入类型文本控件的表…通过单击表中每一行旁边的[+][X]可以删除或添加其他行。

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

参见：

  • 是否有基于JSON API的本地托管CMS？

更新时间：(2014年7月31日星期四18:31:11)

已经创建了一个Github存储库来进一步跟踪这个关闭的So Post。

  • https://github.com/dreftymac/stackoverflow.questions.998832
相关讨论

最新消息：为了回答我自己的问题，以下是迄今为止我所能发现的。如果外面有人有东西，我还是有兴趣了解更多。

  • 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，作为角度指令构建

基于JSON模式

  • 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/exavlt/onde网站
  • 用于生成JSON模式的工具：http://www.jsonschema.net
  • http://metawidget.org网站
  • Visual JSON编辑器，Windows桌面应用程序(免费，开源)，http://visual json editor.org/

商业(无任何有意或暗示的背书，可能或可能不符合要求)

  • LiquidXML-JSON模式编辑器图形JSON模式编辑器和验证器。
  • 网址：http://www.altova.com/download-json-editor.html
  • XML验证程序buddy-json和XML编辑器支持JSON语法检查、语法着色、自动完成、JSON指针评估和JSON模式验证。

JQuery

  • FormBuilder jQuery拖放
  • 福梅奥
  • Shalotelli建筑商

钇铝石榴石

  • Konstellate Reddit邮报

也见

  • 谷歌方块
  • 是否有基于JSON API的本地托管CMS？
  • 基于CMS的概念；；http://www.webhook.com/
  • 基于树的小部件；；http://mbrak.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或YAML字符串时，我首先构建Perl数据结构，然后在上面运行一个简单的转换。您可以在Perl数据结构生成之前放置一个UI，例如Web窗体。

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

1
2
3
4
5
6
7
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);
相关讨论