json editor | Renko's blog | 人生如逆旅，我亦是行人

1. 工具

1. JSON Editor

A web-based tool to view, edit, format, and validate JSON

http://jsoneditoronline.org

2.JSON-Handle

http://jsonhandle.sinaapp.com/

3. json-schema-editor-visual

A json-schema editor of high efficient and easy-to-use, base on React.

http://yapi.demo.qunar.com/editor/
json-schema-editor-visual

4. json-editor

JSON Schema Based Editor

https://github.com/jdorn/json-editor
https://github.com/json-editor/json-editor

5. JSONmate

JSON editor jQuery plugin

https://github.com/DavidDurman/FlexiJsonEditor
http://jsonmate.com

6. JSONedit

User friendly, visual JSON editor built as an Angular 1 directive.

https://github.com/mb21/JSONedit

http://mb21.github.io/JSONedit/

2. JSON Editor使用

INSTALL&USE

1
2
3

npm install jsoneditor
----
bower install jsoneditor

API

EXAMPLE

3. 整合示例

<!DOCTYPE HTML>
<html>

<head>
  <title>JSONEditor</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  <link href="./css/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="./js/jsoneditor.js"></script>

  <script src="https://bgrins.github.io/filereader.js/filereader.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

  <style type="text/css">
    body {
      font: 11pt arial;
      color: #4d4d4d;
      line-height: 150%;
    }

    * {
      margin: 0;
      padding: 0;
    }

    code {
      background-color: #f5f5f5;
    }

    #title {
      height: 150px;
    }

    #container1 {
      float: left;
      width: 500px;
      height: calc(100vh - 150px);
    }

    #container2 {
      margin-left: 500px;
      height: calc(100vh - 150px);
    }
  </style>
</head>

<body>
  <div id="title">
    <h1>Load and save JSON documents</h1>
    <p>
      Load a JSON document:
      <input type="file" id="loadDocument" value="Load" />
    </p>
    <p>
      Save a JSON document:
      <input type="button" id="saveDocument" value="Save" />
    </p>
    <h1>set and get JSON</h1>
    <p>
      <button id="setJSON">Set JSON</button>
      <button id="getJSON">Get JSON</button>
    </p>
  </div>

  <div id="container1"></div>
  <div id="container2"></div>

  <ul>
    <li>the field
      <code>example_id</code> and its value are read-only</li>
    <li>the field
      <code>example_name</code> is read-only but has an editable value</li>
    <li>the field
      <code>example_age</code> and its value are editable</li>
  </ul>

  <h1>Item templates</h1>
  <p>
    Using item templates, the options in the context menu under "insert" and "append" can be extended with extra options, containing
    a domain specific template like a "Person", "Contact", "Order", "Address", etc.
  </p>

  <script type="text/javascript">
    var container1 = document.getElementById('container1');
    var options1 = {
      mode: 'text',
      error: function (err) {
        alert(err.toString());
      },
      change: function () {
        if (editor1 != null) {
          editor2.setText(editor1.getText());
          editor2.expandAll();
        }
      }
    };

    var json = {
      example_id: 123456,
      example_name: 'John',
      example_age: 32
    };

    var editor1 = new JSONEditor(container1, options1, json);

    var container2 = document.getElementById('container2');
    var options2 = {
      mode: "tree",
      onError: function (err) {
        alert(err.toString());
      },
      onChange: function () {
        if (editor2 != null) {
          editor1.setText(editor2.getText());
          editor1.expandAll();
        }
      },
      onEditable: function (node) {
        // node is an object like:
        //   {
        //     field: 'FIELD',
        //     value: 'VALUE',
        //     path: ['PATH', 'TO', 'NODE']
        //   }
        switch (node.field) {
          case 'example_id':
            return false;

          case 'example_name':
            return {
              field: false,
              value: true
            };

          default:
            return true;
        }
      },
      templates: [{
          text: 'Person',
          title: 'Insert a Person Node',
          className: 'jsoneditor-type-object',
          field: 'PersonTemplate',
          value: {
            'firstName': 'John',
            'lastName': 'Do',
            'age': 28
          }
        },
        {
          text: 'Address',
          title: 'Insert a Address Node',
          field: 'AddressTemplate',
          value: {
            'street': '',
            'city': '',
            'state': '',
            'ZIP code': ''
          }
        }
      ],
      autocomplete: {
        applyTo: ['value'],
        getOptions: function (text, path, input, editor) {
          return new Promise(function (resolve, reject) {
            var options = extractUniqueWords(editor.get());
            if (options.length > 0) resolve(options);
            else reject();
          });
        }
      }
    };
    var editor2 = new JSONEditor(container2, options2, json);

    // set json
    document.getElementById('setJSON').onclick = function () {
      var json = {
        "definitions": {
          "Beef": {
            "type": "object",
            "properties": {
              "BID": {
                "type": "string",
                "id": true
              },
              "Species": {
                "type": "string"
              },
              "Birthday": {
                "type": "string"
              },
              "Color": {
                "type": "string"
              },
              "Status": {
                "type": "int"
              }
            }
          }
        }
      };
      editor1.set(json);
      editor2.set(json);
    };

    // get json
    document.getElementById('getJSON').onclick = function () {
      var json = editor1.get();
      alert(JSON.stringify(json, null, 2));
    };

    // Load a JSON document
    FileReaderJS.setupInput(document.getElementById('loadDocument'), {
      readAsDefault: 'Text',
      on: {
        load: function (event, file) {
          editor1.setText(event.target.result);
          editor2.setText(event.target.result);
        }
      }
    });

    // Save a JSON document
    document.getElementById('saveDocument').onclick = function () {
      // Save Dialog
      fname = window.prompt("Save as...");

      // Check json extension in file name
      if (fname.indexOf(".") == -1) {
        fname = fname + ".json";
      } else {
        if (fname.split('.').pop().toLowerCase() == "json") {
          // Nothing to do
        } else {
          fname = fname.split('.')[0] + ".json";
        }
      }
      var blob = new Blob([editor1.getText()], {
        type: 'application/json;charset=utf-8'
      });
      saveAs(blob, fname);
    };

    // helper function to extract all unique words in the keys and values of a JSON object
    function extractUniqueWords(json) {
      return _.uniq(_.flatMapDeep(json, function (value, key) {
        return _.isObject(value) ?
          [key] :
          [key, String(value)]
      }))
    }
  </script>
</body>

</html>

4. 相关依赖学习

1. JSON Schema

http://json-schema.org/

JSON Schema is a vocabulary that allows you to annotate and validate JSON documents.

JSON Schema 用于规范化描述 JSON 数据结构，包括 JSON 数据所包含的字段、以及字段值的类型，以及依赖关系等。

声明 JSON Schema
将普通 JSON 和 JSON Schema 区分开来

1	{ "$schema": "http://json-schema.org/schema#" }

应用

用于描述数据结构
在描述 JSON 数据时，如果数据本身的复杂度很高，高到三维四维，普通的标签函数已经无法表示这种层级结构了，而 JSON Schema 利用 object 和 array 字段类型的反复嵌套，可以规避掉这个缺陷。
当然，除了键值等基本信息，规范层面还提供了丰富的关键词支持，如果想通过自定义扩展字段，解决特定场景的业务需求，也是非常方便的。
用于构建人机可读的文档
计算机领域有个概念叫做自描述。所谓自描述，可以理解为：文档本身包含了自身与其他文档交互相关的描述信息，不需要其他的配置文件或者额外信息来描述。
而 JSON Schema 就是自描述的，它本身就是一份很完善的说明文档，字段的含义说明、该如何取值、格式的要求等都清晰明了。
用于生成模拟数据
通过标签函数生成模拟数据，只能解决基本的格式要求。比如 string 类型的字段，模拟出来的数据，无非是一个随机字符串。
但在 JSON Schema 中，由于字段的描述不仅仅是类型，更多的约束条件，可以确保模拟数据更接近于真实数据。
用于校验数据，实现自动化测试
接口数据的校验工作，往往依赖于测试代码逻辑和用例。如果用 JSON Schema 描述一个数据接口，就不需要再编写测试代码了，所有的逻辑都可以移植到 JSON Schema 中维护。配合 jsv、tv4 等二方校验工具，接口测试可以真正自动化。

Getting Started Step-By-Step

UnderstandingJSONSchema

JSON Schema 的举例

JSON Schema Generator

automatically generate JSON schema from JSON.

2. ace (Ajax.org Cloud9 Editor)

web代码编辑器

https://ace.c9.io/

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

demo

https://github.com/ajaxorg/ace

3. 文本读取和导出

JS前端创建html或json文件并浏览器导出下载

纯前端JS读取与解析本地文本类文件

filereader.js

FileSaver.js

5. form生成json

https://github.com/servanter/json-template

How to Convert HTML Form Field Values to a JSON Object

http://www.ngui.cc/news/show-1846.html