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