JSON-to-HTML.js

    A simple and totally configurable tool that helps you parse json objects to html. Feel free to get a feel for it on our playground.

Installation

This is a Node.js module available through the npm registry. Installation is done using the npm install command:

 npm install json-to-html.js --save

Basic usage:

  import JsonToHtmlBuilder from 'json-to-html.js'

  ...

  const jsonToHtml = new JsonToHtmlBuilder(Data, HTMLElement).build()

  jsonToHtml.execute()

     In order to be configurable, json-to-html.js uses the builder pattern. So, in the example above, you import the JsonToHtmlBuilder, creates an instance of it, passes the data you want to be converted and the html element in which you're going to append the html result from the parsing, and call the build method, which, in turn, gives you an instance of JsonToHtml ready to be executed, through the method execute.

     In this case, as we're not using any custom element creator, thus json-to-html.js fallbacks to its Default Elements factory.

Concepts

     In order to fully understand how the tools works and use its configurable side, its important to understand how data are read and handled by Elements factory. Bellow follows a sample data

{
  "id": "61f99f57cfb6f9db49bfedde",
  "email": "[e-mail]",
  "roles": ["owner", "guest"]
}

This sample is seen by the tool this way:

{
  "id": "61f99f57cfb6f9db49bfedde",
  "email": "[e-mail]",
   "roles" :   [
     "owner",
     "guest"
  ]
}

Breaking into pieces:

Container

     This element involves every Object or Array in the JSON.

CSS classes:

• base: base-container
  
• when-array: array
  
• when-object: object

- Its construction can be overridden by withCreateContainerEl on building phase

Section

     A HTMLElement that involves every object key and value when the value is an Array or an Object.

CSS classes:

• base: section-container
  
• when-array: array
  
• when-object: object

- Its construction can be overridden by withCreateSectionEl on building phase

Section header

     A HTMLElement that involves every object key in which value is an Array or an Object.

CSS classes:

• base: section-header
  

- Its construction can be overridden by withCreateSectionHeaderEl on building phase

Field

     A HTMLElement that involves every object key-value pair, when the value is a primitive.

CSS classes:

• base: field-container
  
• key element: key
• value element: value

- Its construction can be overridden by withCreateFieldEl on building phase

Value

     A HTMLElement that involves every value without a key, frequently it involves an array item.

CSS classes:

• base: value
  

- Its construction can be overridden by withCreateValueEl on building phase

Advanced usage:

coming soon...