JSON 对象图形用户界面

Question

我想为用户提供一个编辑JSON对象的界面。

例如，我有一个JavaScript，它使用以下选项调用Google图表：

var options={
    chartType: "Pie",
    title:"Chart title",
    is3D:false,
    width:500,
    height:300,
};

理想情况下，我的用户应该能够自己修改选项，而无需查看代码。它们将显示从对象自动构建的 UI，其中：

• 图表类型是选择（饼图、折线图、条形图）
• 标题是文本输入
• is3D 是一个复选框
• 等。

有库吗？如果没有，有什么建议可以开始吗？

我当然可以手动构建表单，但这个想法是拥有一个适用于任何对象的通用解决方案。

Answer 1

我发现了这个链接，其中包含描述 JSON 的约定： http://www.json-schema.org/

搜索"JSON模式"使我找到了许多解决方案，尤其是这篇文章：

基于

GUI 或基于 Web 的 JSON 编辑器，其工作方式类似于属性资源管理器

它是两年前开始的，但显然有很好的记录并保持最新。

此外，IBM 网站上 2012 年 4 月的一篇文章：

http://www.ibm.com/developerworks/library/wa-jsonschema/index.html?cmp=dw&cpb=dwwdv&ct=dwnew&cr=dwnen&ccy=zz&csr=040512

Answer 2

问题

如何提供构建任意 JSON 结构的用户友好方法，其中：

• 用户界面直观、灵活，无需开发人员级别的技术熟练程度即可使用
• 用户界面可以从 JSON 的结构中推断
出来
• 对用户界面的修改几乎不需要开发人员干预
• 对底层 JSON 结构的修改可以自动触发对相应用户界面的修改

溶液

如果这是问题的基本前提，那么这种方法似乎确实可以使用"MVVM"命名法下的各种方法中的任何一种（这显然是"MVC"模因的变体）。

例子

http://knockoutjs.com/examples/cartEditor.htmlhttp://en.wikipedia.org/wiki/Model_View_ViewModel#Open_source_MVVM_frameworks

参见

基于

GUI 或基于 Web 的 JSON 编辑器，其工作方式类似于属性资源管理器

Answer 3

编写一个 Web 表单来检测服务的参数。获得参数后，根据可用参数生成表单。提交表单并获取 JSON 结果。

Answer 4

Na，你需要自己构建表单。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" />

表单还允许您描述模式、最小值/最大值、默认值以及此类库将处理的所有内容。您可能会发现一个将简单变成简单的库

{
    chartType: ["Pie", "Line", "Bar"],
    title:"string",
    is3D:"boolean",
    width:"number"
}

进入上面的 html 并提供跨浏览器序列化功能，但是当它变得更复杂时（例如，预选"行"，有一个默认标题等），您将回到 html（或它的 js 表示）。