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(
    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
    }
}
*/

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(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.