像属性浏览器一样工作的基于 GUI 或基于 Web 的 JSON 编辑器 [英] GUI-based or Web-based JSON editor that works like property explorer

问题描述

背景:这是对可能尚不存在的东西的请求，但我很长时间以来一直想建立一个.首先我会问是否有人见过类似的东西.

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.

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

Suppose you have an arbitrary JSON structure like the following:

{
    '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 中对其进行修改?

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?

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

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.

大创意:大创意"这背后是用户将能够指定任何任意(非递归)JSON 结构，然后还能够使用基于 GUI 的交互编辑结构(这将类似于XML 编辑器网格视图"XML 间谍).

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 api 的 CMS本地托管?
• https://ux.stackexchange.com/questions/37237/treetable-as-a-flexible-condition-filter-editor
• JSON 编辑器
• YAML GUI

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

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

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

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

推荐答案

更新: 为了回答我自己的问题，以下是我目前能够发现的内容.如果其他人有什么东西，我仍然有兴趣了解更多信息.

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 不错
• 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 指令构建

• 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.html Outline 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

基于 JSON Schema

• https://github.com/json-editor/json-editor
• https://github.com/mozilla-services/react-jsonschema-form
• https://github.com/json-schema-form/angular-模式形式
• 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/

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

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

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

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/

这篇关于像属性浏览器一样工作的基于 GUI 或基于 Web 的 JSON 编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！