Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

json2schema4editor

0.0.7 • Public • Published

JSON2Schema

JSON2Schema is a small WebApp running totally in your browser, that supports developers in creating a JSON Schema for the JSON Editor originally developed by Jeremy Dorn and is now available and maintained as json-editor package in https://www.github.com/json-editor/json-editor

The corresponding NPM module json2schema4editor (JSON to(2) Schema for(4) Editor means that the JSON schema is created for the JSON editor json-editor](https://www.github.com/json-editor/json-editor).

Online Demo JSON2Schema

You can create from a JSON of your choice a corresponding JSON schema with one click. With for the the JSON2Schema tool with the following URL:

https://niehausbert.gitlab.io/JSON2Schema

Copy a JSON of your choice into the JSON2Schema tool and create a raw JSON schema, that works in the JSON editor

Table of Contents generated with DocToc

Quickstart

  • Select a JSON of your choice. If your JSON contains an array, The array should contain just a single element. If the array contains more than one element, all elements are treated as oneOf element in the JSON schema.
  • start https://niehausbert.gitlab.io/JSON2Schema in your browser and copy your JSON into the editor JSON Input
  • press button create JSON Schema and change the label and descriptions for the input data. Save the JSON schema by presing the export JSON Schema button.
  • press the create JSON Editor to see how your JSON editor will look like.
  • under the JSON Editor you will find an export button. Save jsoneditor_app.zip by pressing the Export JSON Editor button.

What is a JSON Schema?

A JSON Schema is a basically a file, that defines the layout of the input and chosen editor elements for each key-value pair in given JSON for the JSON Editor by Jeremy Dorn, i.e. it defines if the user of the JSON editor:

  • Edit a string,
  • uses a select box for different options in the graphical user interface GUI,
  • select a color,
  • select a data,
  • increase or decrease an integer value,
  • ...

How Create a JSON Schema

Define a JSON you want to use for you application.

{
  "name":"Hans Mustermann",
  "age":36,
  "weightlist": [
    {
      "date":"2018-05-23T8:37:58.258Z",
      "value":76.0
    }
  ],
  "temperaturelist": [
    {
      "date":"2018-05-24T07:22:55.332Z",
      "value":36.5
    }
  ]
}

As in example we create a privacy-friendly WebApp, that stores health related personal data WITHOUT sending the collected data to a server for commercial data harvesting (like fitness tracker). A patient measure temperature and weight on a daily basis. The collected data is stored in the mobile device in JSON file without connecting a server. The storage format of the JSON is defined by a JSON Schema. If you plugin the JSON Schema into the JSON Editor originally generated by Jeremy Dorn, then the JSON editor will provide the Graphical User Interface (GUI) to input the data. Creating a WebApp in general or using the JSON Editor does to specify does not imply that the collected data is not submitted from the mobile device to remote server. OpenSource architecture of the WebApp assures that the computer scientist can validate, if the source code contains hidden components that submit the collected JSON data to remote server. For a privacy friendly WebApp for the data mentioned above could be stored (even encrypted) on the SD-card of the mobile device or in the local storage of the browser (see AppLSAC).

Use the sample JSON in the Demo JSON2Schema WebApp to play around the Schema generation and edit the generate Schema to understand how the JSON Schema defines the Graphical User Interface of the JSON Editor.

ZIP File jsoneditor_app.zip

JSON2Schema uses the following underlying ZIP file jsoneditor_app.zip to bundle the generated JSON schema with a complete JSON editor.

Remark: The following sections are designed for developers to understand the underlying principles of JSON2Schema

Application of jsoneditor_app.zip in JSON2Schema

JSON2SchemaJ loads the compressed JSON editor in zip/jsoneditor_app.zip with the JS library in docs/db/files2json.js. The file files2json.js stores jsoneditor_app.zip as [base64 encoded string]. If

Exchange jsoneditor_app.zip for JSON Editor Generation

JSON2Schema is able to export a complete JSON editor with the generated JSON schema. This tool create_files4json.html can be used to alter the pre-defined JSON editor for the exported jsoneditor_app.zip. If you start JSON2Schema an base64 encoded ZIP file is handled with JSZip and the generated JSON schema replaces jsoneditor_app/schema/schema4json.js in the exported ZIP file. If you want to change the exported JSON editor (e.g. CSS and additional features) perform the following two main steps:

(1) Modify the Editor jsoneditor_app.zip

  • download underlying ZIP file jsoneditor_app.zip that is used by JSON2Schema
  • unzip jsoneditor_app.zip
  • modify the content in the folder jsoneditor_app/ according to your requirements and constraints.
  • compress the folder jsoneditor_app/ and generate a new jsoneditor_app.zip.

(2) Modify the JSON2Schema Tool in JSON2Schema-master.zip

Why is the base64 encoded used for JSON2Schema?

A zip-file is a binary format and the privacy friendly design of an AppLSAC prevents the browser from reading and writing data silently arbitrary file from the user's hard drive.

Base64 encoding of zip-files converts a binary file into a string/text. Binary-to-text encoding and decoding algorithms allow binary data to be stored or carried across channels that support text content without loss of bytes.

Base64 encoding of zip-files is used to represent the zip-file jsoneditor_app.zip in string that is stored in a Javascript library files2json.js that stores the Base64 encoded binary as text.

Assume the variable base64data contains the base64 encoded zip-file. With JSZip the zip-file can be populated with base64 encoded zip-file in base64data.

var zip = new JSZip();
var base64data = "AOSDIOhajSDAHIOAPSDAIS....";
zip.loadAsync(base64data,{"base64":true}).then(function (pzip) {
  pzip.forEach(function (relativePath, file){
      console.log("File in ZIP: ", relativePath);
  });
});

Remark: In the demo code above the variable base64data does not contain a real base64 encoded zip-file. Use the tool create_files4json.html to create base64 encoded JavaScript files that store

Acknowledgement

Special thanks to the following individual developers and teams of OpenSource JavaScript projects:

  • LoadFile4DOM is a library that allows to load files into an application that run completely in a browser without the need to submit data to a server for processing. With this library the users are able load files into your browser application and process the data in the browser and provide the output to the user, without submitting any data to a server. Demo LoadFile4DOM
  • FileSaver.js Developer Eli Grey provided the FileSaver.js that is used to store created JSCC files to the local filesystem. JSCC uses the same mechanism of browsers, that allows a Save as... in the context menu of a web pages or image. So not uncontrolled write access to your file system is implemented, because users have to select the locations in which the user whats to store the file (e.g. JSON, Javascript or HTML).
  • Font Awesome Icons - 4.7.0 thanks to fontawesome.com for providing the free 4.7.0 version for local application for this WebApp. The fonts in version 4.7.0 are created by Font Awesome and licensed under SIL OFL 1.1. The javascript-code for injecting the icon into the DOM licensed under MIT License. The Documentation for Font Awesome - 4.7.0 licensed under CC BY 3.0.
  • JointJS JointJS is a JavaScript diagramming library. It can be used to create either static diagrams. JointJS is used in this project to create UML-diagrams, that are interactive diagramming in conjunction and application builder in Javascript.
  • Inheritage for JavaScript with protoypes by Gavin Kistner
  • 3 ways to define a JavaScript class by Stoyan Stefanov
  • JQuery is used for the theme and standard operations in the Document Object Model (DOM) of HTML-pages. The JQuery-Themeroller was used to create a JQuery theme for JSCC.
  • JSZip - LibreOffice files, Geogebra files (Open Source applications) have file extensions that are actually ZIP files. To handle, change and generate those documents in a browser is possible the library JSZIP. Even a small file system for WebApps that can be stored with a folder structure in a ZIP file can be generated in a browser. So JSZip is a multi-functional JavaScript class for generating and reading ZIP files. Thank you for sharing this great library with the Open Source community.

Install

npm i json2schema4editor

DownloadsWeekly Downloads

0

Version

0.0.7

License

MIT

Unpacked Size

35.5 MB

Total Files

798

Last publish

Collaborators

  • avatar