JSFiddle - React, Tailwind, and code Playground

by Mathias Bynens

HTML

<div id="dom"></div>
<div id="output"></div>

CSS

#dom, #output { border: 5px solid lime; }

JavaScript

(function() {

    var arrDOM = [{
        component: 'foo',
        title: 'Hallo',
        children: [{
            component: 'bar'
        },
        {}]
    },
    {
        component: 'bar',
        title: 'Dit is comp #2',
        children: [{
            component: 'foo'
            },
        {}]
    }],

    arrComponents = {
        foo: {
            name: 'Sidebar',
            html: '<h1>dit is component foo</h1>'
        },
        bar: {
            name: 'Voorbeeldwidget',
            html: '<p>Dit is component bar</p>'
        }
    },

    $elDOM = $('#dom'),
        
    $elOutput = $('#output');

    function parse(arrDOM) {
        var output = $.map(arrDOM, function(value, index) {
            return arrComponents[value.component].html;
        });

        $elOutput.html(output.join('\n'));
        
        output = '';
        output = $.map(arrDOM, function(value, index) {
            var comp = arrComponents[value.component];
            console.log(comp, comp.children, !!comp.children);
            if (comp.children) {
                console.log('children omg');
                return '<li>' + comp.name + '<ul>' + $.map(comp.children, function(value, index) {
                     return arrComponents[value.component].name;
                }).join('<li>') + '</ul>';
            } else {
                return arrComponents[value.component].name;
            }
        });

        $elDOM.html('<li>' + output.join('<li>'));
    }

    parse(arrDOM);

}());