Generation of an HTML plain text from a Json structure with several setting options.
npm i @ikilote/json2html --save
Note for Angular:
- 0.0.6 : for View Engine
- 0.1.0+ : for Ivy
-
Json2HTML: json or js object →
- HTML
- XML
- Angular template string (with
@
) - Comment
- Doctype
- etc.
-
Json2Js: json →
- js object string
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(),
);
/*
<div id="test1"
class="testclasse">
test
<div id="test2"
class="foobar">
test
</div>
</div>
*/
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") {
<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
}
}
*/
{
"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(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"'
}
}
*/
npm run build:lib
npm run publish:lib
npm run build:demo
This module is released under the permissive MIT license. Your contributions are always welcome.