JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

Outline
<div id="json-viewer-outline"></div>

Document
<div id="json-viewer"></div>

CSS

body {
  font-family:arial;
}
ul {
    margin-left: 1em;
}

#json-viewer-outline{
  font-size:10px;
}

.json-key {
    font-weight: bold;
}
.json-value {
    margin-left: 20px;
}
.json-standard {
    margin-right: 0px;
    font-weight:bold;
}

.lvl1 {
    font-size: 40px;
}
.lvl2 {
    font-size: 35px;
}
.lvl3 {
    font-size: 30px;
}
.lvl4 {
    font-size: 25px;
}
.lvl5 {
    font-size: 20px;
}

.lvl6 {
    font-size: 15px;
}

.lvl7 {
    font-size: 10px;
}

.leaf {
  font-size:10px!important;
}

JavaScript

function visitOutlineObj($container, obj, lvl,path) {
        if (lvl > 5) return;
        var $ul = $('<ul>');
        lvl+=1; 
        for (var prop in obj) {
            var $li = $('<li>');
						path += '$' + prop.replaceAll(' ','_');
					  if (prop != 'Headingtag' && prop != 'Sectiontext' && prop != 'data')
            $li.append('<a href=#'+path+' class="json-key out'+ lvl +'">' + prop + '</a>');
            if (typeof obj[prop] === "object") {
                 visitOutlineObj($li, obj[prop],lvl,path);
            } else {
//                $li.append('<p class="json-value lvl'+ lvl +'">'+obj[prop]+'</p>');                   
            }
            $ul.append($li);
        }
        $container.append($ul);
    }
    
       function visitObj($container, obj, lvl,path) {
        var $ul = $('<ul>');
        lvl+=1; 
        for (var prop in obj) {
            var $li = $('<li>');
						path += '$' + prop.replaceAll(' ','_');
					  if (prop != 'Headingtag' && prop != 'Sectiontext' && prop != 'data')
            $li.append('<span id='+path+' class="json-key lvl'+ lvl +'">' + prop + '</span>');
            if (typeof obj[prop] === "object") {
                 visitObj($li, obj[prop],lvl,path);
            } else {
							if (prop != 'Headingtag' && prop != 'Sectiontext'){
                $li.append('<p class="json-value lvl'+ lvl +' leaf">'+obj[prop].replaceAll('\n','<br/>')+'</p>');                   }
              else{
                //$container.last().prepend('<span class="json-standard lvl'+ (lvl-1) +' ">'+obj[prop]+':</span>');          
                }
            }
            $ul.append($li);
        }
        $container.append($ul);
    }
//    http://engine-spirit.s-factors.com/dictionary/compare?f1=1905051&f2=2700871&
$.getJSON('https://engine-spirit.s-factors.com/dictionary/downloaddatajson?id=9647415', function(data) {
    visitOutlineObj($('#json-viewer-outline'), data ,0,"");
    visitObj($('#json-viewer'), data ,0,"");
    
 });