javascript JSON 对象图形用户界面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10217555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSON object GUI
提问by Christophe
I'd like to offer my users an interface to edit JSON objects.
我想为我的用户提供一个界面来编辑 JSON 对象。
For example I have a JavaScript that calls Google charts with the following options:
例如，我有一个 JavaScript，它使用以下选项调用 Google 图表：
var options={
chartType: "Pie",
title:"Chart title",
is3D:false,
width:500,
height:300,
};
Ideally my users should be able to modify the options themselves without having to look into the code. They would be presented with a UI automatically built from the object, where:
理想情况下，我的用户应该能够自己修改选项而无需查看代码。他们将看到一个从对象自动构建的 UI，其中：
- chartType is a select (Pie, Line, Bar)
- title is a text input
- is3D is a checkbox
- etc.
- chartType 是一个选择（Pie、Line、Bar）
- 标题是文本输入
- is3D 是一个复选框
- 等等。
Are there libraries for this? If not, any suggestion to get started?
有这方面的图书馆吗？如果没有，有什么建议可以开始吗？
I could of course build the form manually, but the idea is to have a generic solution that works for any object.
我当然可以手动构建表单，但我的想法是拥有一个适用于任何对象的通用解决方案。
采纳答案by Christophe
I found this link with conventions for describing JSON: http://www.json-schema.org/
我发现这个链接与描述 JSON 的约定：http: //www.json-schema.org/
Searching for "JSON schema" led me to a number of solutions, and in particular this post:
搜索“JSON 模式”让我找到了许多解决方案，特别是这篇文章：
GUI-based or Web-based JSON editor that works like property explorer
像属性浏览器一样工作的基于 GUI 或基于 Web 的 JSON 编辑器
It was started two years ago, but is apparently well documented and kept up to date.
它是两年前开始的，但显然有据可查并保持最新状态。
Also, a post from April 2012 on the ibm website:
此外，2012 年 4 月在 ibm 网站上发表的一篇文章：
回答by dreftymac
Problem
问题
How to provide a user-friendly means of constructing arbitrary JSON structures where:
如何提供一种用户友好的方式来构建任意 JSON 结构，其中：
- the user interface is intuitive, flexible and capable of use without developer-level technical proficiency
- the user interface can be inferred from the structure of the JSON
- modifications to the user interface require little or no developer intervention
- modifications to the underlying JSON structure can automatically trigger modifications to the corresponding user interface
- 用户界面直观、灵活且无需开发人员级别的技术熟练程度即可使用
- 用户界面可以从 JSON 的结构中推断出来
- 对用户界面的修改几乎不需要开发人员干预
- 对底层 JSON 结构的修改可以自动触发对相应用户界面的修改
Solution
解决方案
If this is the basic premise of the question, this approach does appear to be possible using any of various approaches under the "MVVM" nomenclature (which is apparently a variant of the "MVC" meme).
如果这是问题的基本前提，那么这种方法似乎确实可以使用“MVVM”命名法（这显然是“MVC”模因的变体）下的各种方法中的任何一种。
Examples
例子
http://knockoutjs.com/examples/cartEditor.htmlhttp://en.wikipedia.org/wiki/Model_View_ViewModel#Open_source_MVVM_frameworks
http://knockoutjs.com/examples/cartEditor.html http://en.wikipedia.org/wiki/Model_View_ViewModel#Open_source_MVVM_frameworks
See Also
也可以看看
GUI-based or Web-based JSON editor that works like property explorer
回答by Har
Write a webform to detect the parameters of the a service. Once you have the parameters, generate your form based on parameters available. Submit your form and grab the JSON Result.
编写一个 webform 来检测服务的参数。获得参数后，根据可用参数生成表单。提交您的表单并获取 JSON 结果。
回答by Bergi
Na, you will need to build the form yourself. HTML forms are just a way to describe requirements for properties (of a request), and their serialisation will just return the desired object. In your example it would be
不，您需要自己构建表单。HTML 表单只是描述（请求的）属性要求的一种方式，它们的序列化只会返回所需的对象。在您的示例中，它将是
<select name="chartType"><option value="Pie"/><option value="Line" />...</select>
<input type="text" name="title" />
<input type="checkbox" name="is3D" />
<input type="number" name="width" />
etc. Forms also allow you to describe patterns, min/max-values, default values and everything such a library would handle. You might find a library that turns a simple
等等。表单还允许您描述模式、最小/最大值、默认值以及此类库将处理的所有内容。你可能会发现一个图书馆，它变成了一个简单的
{
chartType: ["Pie", "Line", "Bar"],
title:"string",
is3D:"boolean",
width:"number"
}
into the above html and provides a crossbrowser serialisation function, but when it gets more complicated (e.g. preselect "Line", have a default title etc) you will be back to the html (or a js representation of it).
进入上面的 html 并提供跨浏览器序列化功能，但是当它变得更复杂时（例如预选“行”，有一个默认标题等），你将回到 html（或它的 js 表示）。
