json2html

Generation of an HTML plain text from a Json structure with several setting options.

Example usage in Magma demo.

Installation

npm i @ikilote/json2html --save

Note for Angular:

• 0.0.6 : for View Engine
• 0.1.0+ : for Ivy

features

• Json2HTML: json or js object →
  • HTML
  • XML
  • Angular template string (with @)
  • Comment
  • Doctype
  • etc.
• Json2Js: json or js object →
  • js object string

Demo

See a live demonstation

Usage

Example Json2html

import{Json2html}from'@ikilote/json2html';console.log(newJson2html({tag: 'div',attrs: {id: 'test1',class: 'testclasse'},body: ['test',{tag: 'div',attrs: {id: 'test2',class: 'foobar'},body: 'test',},],},{formatting: 'multiline'},).toString(),);/*<div id="test1" class="testclasse"> test <div id="test2" class="foobar"> test </div></div>*/

import{Json2html}from'@ikilote/json2html';console.log(newJson2html([{annotation: 'let',value: 'a = "2"',},{annotation: 'if',conditional: 'a === "1"',body: {tag: 'a',attrs: {href: 'https://example.com',},body: 'lien',},},{annotation: 'else',body: {tag: 'a',attrs: {href: 'https://test.com',},body: 'lien',},attached: true,},{annotation: 'switch',conditional: 'a',body: [{annotation: 'case',conditional: 'caseA',body: 'Value A',},{annotation: 'case',conditional: 'caseB',body: 'Value B',},{annotation: 'default',body: 'Default',},],},],{formatting: 'multiline'},).toString(),);/*@let a = "2";@if (a === "1") { <a href="https://example.com"> lien </a>} @else { <a href="https://test.com"> lien </a>}@switch (a) {@case (caseA) { Value A }@case (caseB) { Value B }@default { Default }}*/

Example Json2Js

{
"tag": "div",
"attrs": {
"id": "test",
"class": "testclasse",
"test": null,
"data-test1": "`value1`",
"data-test2": "'value2'",
"data-test3": "\"value3\""
}
}

import{Json2html}from'@ikilote/json2html';console.log(newJson2html(myJson,{tabSize: 2,tadAdded: 1}).toString());/*{ tag: 'div', attrs: { id: 'test', class: 'testclasse', test: null, 'data-test1': '`value1`', 'data-test2': `'value2'`, 'data-test3': '"value3"' }}*/

Publishing the library

npm run build:lib
npm run publish:lib

Publishing the demo

npm run build:demo

run tests

npm run test:lib

License

This module is released under the permissive MIT license. Your contributions are always welcome.