Web Component JsonTree

A small web component for rendering json in the form of a tree

Reference

| Attribute | Purpose | Example values | | --------- | --------------------------------- | ------------------ | | style | Pass custom styles into component | p { color: red } |

| Property | Purpose | Example value | | ---------- | ---------------------------------- | ------------------------------------- | | data | Pass data into component | { a: 1, b: 2, c: { c1: 3, c2: 4 } } | | style | Pass custom styles into component | p { color: red } | | replacer | Replace any default node rendering | ({ defaultNode }) => defaultNode() |

| CSS Property | Purpose | Example value | | ------------ | ------------------------------------------------ | ------------- | | --tab | Indentation from the left edge to create nesting | 10px, 5% | | --space | Padding of rows | 10px, 5% |

replacer

Props:

• key: string — name of key from passed object
• node: any — value of node from passed object
• level: number — level of nesting
• defaultNode: function — function, that returns default node
• parentNode: HTMLLiElement — parent inside which the node will be rendered

Returns:

• HTMLElement — node to render

Examples

Valid JSON as child

<json-tree>{ "a": 1, "b": 2, "c": { "c1": 3, "c2": 4 }}</json-tree>

js-object as property

<json-tree></json-tree>

<script>
    const tree = document.querySelector('json-tree');
    tree.data = { a: 1, b: 2, c: { c1: 3, c2: 4 } };
</script>

Properties with color: red

<json-tree style="p { color: red }"></json-tree>

<script>
    const tree = document.querySelector('json-tree');
    tree.data = {
        a: 1,
        b: 2,
        c: { c1: 3, c2: 4 },
    };
</script>

Renderer and style for displaying array with square brackets

<json-tree></json-tree>

<script>
    const tree = document.querySelector('json-tree');
    tree.data = {
        a: 1,
        b: 2,
        c: { c1: 3, c2: 4 },
        arr: [1, 2, { el: 3 }],
    };

    tree.renderer = ({ key, node, level, defaultNode, parentNode }) => {
        const _node = defaultNode();

        if (!Array.isArray(node)) return _node;

        const openBracket = document.createElement('span');
        openBracket.textContent = ' [';

        const closeBracket = document.createElement('p');
        closeBracket.textContent = ']';

        _node.querySelector('summary').appendChild(openBracket);
        _node.appendChild(closeBracket);

        _node.classList.add('array');

        return _node;
    };

    // this will result in displaying [...] after the closed details with an array inside
    tree.style = `details.array:not(*[open]) summary::after { content: '...]' }`;
</script>