JSON Editor的学习和使用 - SHJ123

时间:2024-03-10 09:55:38

JSON Editor的学习和使用

首先给出链接

  •   JSON Editor 的中文文档:https://www.cnblogs.com/handk/p/4766271.html
  •   JSON Editor GitHub 英文文档:https://github.com/jdorn/json-editor
  •   JSON Editor Online 网址:http://jsoneditoronline.org/#right=local.neyesa&left=local.worihi
  •   JSON Editor 官网在线示例网址:http://jeremydorn.com/json-editor/
  •        JSON 查询语言JMESPath的网址:http://jmespath.org/tutorial.html

JSON Editor 的使用(没有使用HTML表单)

例如使用JSON Editor Online。如下图所示左侧为code模式,右侧为tree模式。

JSON Editor Online

在code视图下的功能依次为:

  • code视图
  • tree视图(以树状结构显示)
  • 展开字段
  • 缩进字段
  • 内容排序(升降序)
  • 筛选、排序、内容转换。需要 JMESPath (JMESPath是一种JSON查询语言)查询语句来筛选、排序或者转换JSON数据。
  • 修复JSON:修复引号和转义符,删除注释和JSONP表示法,将JavaScript对象转换为JSON
  • 撤销上次动作
  • 重做

其中JMESPath的使用在http://jmespath.org/tutorial.html。最基础的查询语句如下图,是键对值中的key。

 在tree视图下的功能依次为:

  • code视图
  • tree视图(以树状结构显示)
  • 使用适当的缩进和换行符格式化
  • 压缩JSON数据,删除所有空格
  • 内容排序(升降序)
  • 筛选、排序、内容转换。需要 JMESPath (JMESPath是一种JSON查询语言)查询语句来筛选、排序或者转换JSON数据。
  • 撤销上次动作
  • 重做
  • 点击左侧一列的按钮可以插入、删除字段                                             

 JSON Editor 的学习和使用

 具体流程是:JSON Schema→表单→JSON OUTPUT

JSON Editor 根据JSON Schema 生成了Html 表单对JSON编辑,同时在官方在线例子中可以修改JSON OUTPUT来对表单的数据重置。

 JSON Editor 的使用方法

// Set default options---JSON Editor 的CSS 框架
JSONEditor.defaults.options.theme = \'bootstrap2\';

// Initialize the editor---JSON Editor 的初始化
var editor = new JSONEditor(document.getElementById("editor_holder"),{
  schema: {
      type: "object",
      properties: {
          name: { "type": "string" }
      }
  }
});

// Set the value---赋值
editor.setValue({
    name: "John Smith"
});

// Get the value---取值
var data = editor.getValue();
console.log(data.name); // "John Smith"

// Validate---检查数据是否有效
var errors = editor.validate();
if(errors.length) {
  // Not valid
}

// Listen for changes---监听事件,当editor的数据改变的时候,触发
editor.on("change",  function() {
  // Do something...
});

 使用不同的数据类型

例如date,range等等,不同的数据用format格式化生成一个控件。

例如url,email等类型要求格式正确,我们也可以自己设置对数据格式的要求,例如maximum,maxlength等等。在jsonform表单给出过对字段的描述,如下图

 jsonform的链接 https://github.com/jsonform/jsonform/wiki

当然还有一些其他的数据类型。而且可以加载其他编辑工具,可以增加Json Editor 的数据的样式。

编辑器选项

 对editor样式的改变。

依赖

 字段的值依赖于另一个,通过watch监视字段是否改变。

模板

 模板的作用是告诉编辑器full_name的值可能是fname [space] lname 的格式。下图是一个模板的例子

{
  "type": "object",
  "properties": {
    "first_name": {
      "type": "string"
    },
    "last_name": {
      "type": "string"
    },
    "full_name": {
      "type": "string",
      "template": "{{fname}} {{lname}}",
      "watch": {
        "fname": "first_name",
        "lname": "last_name"
      }
    }
  }
}