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

$3

`typescript
import { Json2html } from '@ikilote/json2html';

console.log(
new Json2html(
{
tag: 'div',
attrs: { id: 'test1', class: 'testclasse' },
body: [
'test',
{
tag: 'div',
attrs: { id: 'test2', class: 'foobar' },
body: 'test',
},
],
},
{ formatting: 'multiline' },
).toString(),
);
/*


`typescript
import { Json2html } from '@ikilote/json2html';

console.log(
new Json2html(
[
{
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") {

lien

} @else {

lien

}
@switch (a) {
@case (caseA) {
Value A
}
@case (caseB) {
Value B
}
@default {
Default
}
}
*/
`

$3

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

`typescript
import { Json2html } from '@ikilote/json2html';

console.log(new Json2html(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.