JSFiddle - React, Tailwind, and code Playground

by Fayaz Valli

HTML

<div id='output'>
</div>

JavaScript

var testJSON = {"id":"750","content":"Physics","type":"Subject","media":[{"id":"49","content":"http://www.wpunj.edu/cosh/departments/physics/images/physics.png","attributes":{"type":"Image","isPrintable":"1"}}],"children":[{"id":"759","content":"physics overview number 1","type":"Paragraph"},{"id":"760","content":"electricity","type":"Topic","tags":[{"id":"54","content":"tag 1"},{"id":"55","content":"tag 2"},{"id":"56","content":"tag 3"}],"media":[{"id":"46","content":"media1.com","attributes":{"type":"Image","isPrintable":"1"}},{"id":"47","content":"media2.com","attributes":{"type":"YouTube","isPrintable":"0"}},{"id":"48","content":"media3.com","description":"Described","attributes":{"type":"Image","isPrintable":"1"}}],"children":[{"id":"761","content":"faraday","type":"Subtopic","tags":[{"id":"52","content":"faradayTag1"},{"id":"53","content":"faradayTag2"}],"children":[{"id":"762","content":"faradayConcept","type":"Concept","children":[{"id":"763","content":"faradayParagraph","type":"Paragraph"}]}]},{"id":"764","content":"gauss","type":"Paragraph"}]},{"id":"765","content":"mechanics","type":"Topic","children":[{"id":"766","content":"mech 1","type":"Paragraph"},{"id":"767","content":"mech 2","type":"Paragraph"}]}]} ;

var body = '';

function scan(obj)
{
    var k;
    if (obj instanceof Object) {
        for (k in obj){
            if (obj.hasOwnProperty(k)){
                    
                /*if ( k == 'id' )
                    body += '<span style="color:#AAA;">' + k + ':</span>';
                if ( k == 'content' )
                    body += '<span style="color:purple;">' + k + ':</span>';
                if ( k == 'type' )
                    body += '<span style="color:red;">' + k + ':</span>';
                    */
                body += k + ':';
                scan( obj[k] );  
            }                
        }
    } else {
        /*if ( obj == 'Subject' )
            body += '<span style="color:orange;">' + obj + '</span>';
        if...