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模式。

在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"
      }
    }
  }
}

原文地址:https://www.cnblogs.com/shjblog/p/12335956.html

时间: 2024-10-30 08:14:25

JSON Editor的学习和使用的相关文章

eclipse 安装 json Editor Plugin的方法

json Editor Plugin是一款可以显示JSON高亮语法,折叠的eclipse插件.但目前网上的安装方法少,且几乎都无效.我按照官网的步骤安装很容易就成功了,现在贴出目标供大家参考: 1.在eclipse中选择Help->Install new software 2.点击ADD,添加新地址. 3.地址中输入https://sourceforge.net/projects/eclipsejsonedit/files/update/ 这个很重要,之前的链接地址已经失效,这个是官网放出的最新

JSON.parse()和JSON.stringify()方法学习

JSON.parse()和JSON.stringify()方法学习 JSON对象中有两个非常好用的方法 JSON.parse接受json字符串转化为JS对象 JSON.stringify接收一个JS对象转化为json字符串 JSON对象与普通对象的区别是JSON对象键值对都必须用双引号 例如: const my={ name:"dylan", age:"18" } let myObj=JSON.stringify(my) console.log(myObj)//&q

Json数据的学习

JSON 教程 <body><h2>JSON Object Creation in JavaScript</h2> <p>Name: <span id="jname"></span><br /> Age: <span id="jage"></span><br /> Address: <span id="jstreet"&g

JSON+YAML初步学习+ciscoconfparse

Git git clone 在github.com右上角点击加号创建新的repository 在Linux或Mac命令行下,找到你想存放这个repository的目录,然后git clone 某个repository的https链接 git clone 除了上面那种方法还可以通过SSH的方式,但是我还没试过,那种是clone一个 .git为结尾的链接好像 cd 到.git 目录下,ll是看不出来的,只能ls -al,看到objects目录下有很多文件,其实每个文件都对应着一个“版本”,git的版

JavaScript高级程序设计第20章JSON 笔记 (学习笔记)

第二十章 JSON 1.Json 可以表示三种类型的值: 1.简单值: 表示数值:5  表示字符串:“hello wrold”注表示字符串时必须使用双引号 2.对象: {“name”:“mi”,”age”:24}与JavaScript对象有两处不同一是没有声明变量 二是没有末尾的分号json对象中属性必须带引号,对象里的值可以嵌套对象. 3.数组 Json数组表示:[25,”hi”,true]和json对象一样json里也没有分号和变量 2.json对象 1.Stringify()方法用于把ja

Editor Scripting学习笔记之Menu Item

主要用到: MenuItem属性 MenuCommand参数 可能用到: EditorApplication类 Selection类 GameObjectUtility类 FileUtil类 Undo类 以及各种工具类,视情况而定 Menu Item是编辑器扩展中最简单的一种扩展方式,主要用于对常用操作进行封装,使之成为菜单,方便调用.用法非常简单,直接上代码 using UnityEngine; using UnityEditor; public class MenuTest { // Add

模块urllib requests json xml configparser 学习笔记

发起http请求 获取返回值 返回值是字符串 第三方模块安装 pip install requests 返回值格式 xml  html  jaon json 功能  loads   字符串>>>列表 字典 字符串里面必须是"",因为其他的编程语言字符串都是"" dups      列表>>>字符串 xml from xml.etree import ElementTree as ET tree = ET.parse('1.xml'

JSON必知必会学习总结(一)

七月第一周,从学校毕业回来上班的第一周.离开一段时候后,再次回来重新工作,有了很多新的认识,不再是实习时那么混混沌沌了.每天我自己该做什么,怎么做,做到什么程度更清晰了.除了要去完成我负责的工作,我开始去想除了完成工作我要从中获得什么. 今天早晨走的时候,随手塞包里一本薄薄的书--<JSON必知必会>,白天间隙的时候看了前两章,这两章设计的内容平时基本接触过,但是没有系统的总结过,看完之后清晰了很多. 首先,JSON是什么,这本书是说JSON是一种数据交换格式,被许多系统用于数据交换. 数据交

Cocos2d-x学习笔记(十三)—— 数据解析(json/xml)

在我们获取网络数据时,基本上使用的都是xml以及json,因此学习对这两种数据进行解析,对我们有很大的帮助. 下面是代码: HelloParse.h: <span style="font-size:18px;">#ifndef __HELLOPARSE_H__ #define __HELLOPARSE_H__ #include "cocos2d.h" using namespace cocos2d; class HelloParse : public c