JSFiddle - React, Tailwind, and code Playground

by Bilal Shakeel

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

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

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

<script src='https://engine-spirit.s-factors.com/rainbowvis.js'></script>

CSS

body {
	  font-family:"Roboto", "Helvetica", "Arial", sans-serif;
	}
	ul {
	    margin-left: 1em;
		list-style: none;
	}

	#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: 12px;
	}

	.leaf {
	  font-size:10px!important;
	  background: #f7f7f7;
      padding: 10px;
	}
	.yellowColor{background-color: yellow;}
	sssttt {line-height: 17px;}
	sssss:hover {background: #cfd4d4;padding: 4px;border-radius: 5px;}
	.sentiment{padding: 4px;border-radius: 7px;font-weight: 800;}
	//.sentiment-ngtv{background: #d46342;}
	//.sentiment-pstv{background: #43b542;}
	.tooltip{
		position:absolute;
		top:-15px;
		background-color:#333;
		color:#fff;
		padding:5px;
		border-radius:5px;
		}

JavaScript

function titleCase(str) {
	   var splitStr = str.toLowerCase().split(' ');
	   for (var i = 0; i < splitStr.length; i++) {
	       // You do not need to check if i is larger than splitStr length, as your for does that for you
	       // Assign it back to the array
	       splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
	   }
	   // Directly return the joined string
	   return splitStr.join(' '); 
	}
	
	function detectObjFromCurrentObj(obj){
		var ObjIdx = '';
		for (var prop in obj) {
			if (typeof obj[prop] === "object") {
				ObjIdx = prop;
			}
		}
		return ObjIdx;
	}
	
	function detectSecTextFromCurrentObj(obj){
		var STIdx = '';
		for (var prop in obj) {
			var regex = /^[a-zA-Z]{1}[0-9]{1}$/;
			if (prop.includes('-st') || regex.test(prop)  || prop == 'data') {
				STIdx = prop;
				if(obj[prop] == 'data'){
					STIdx = 'data';
				}
			}
		}
		return STIdx;
	}
    function detectlevelCurrentObj(obj){
		var STIdx = '';
		for (var prop in obj) {
			var regex = /^l{1}[0-9]{1}$/;
			if(prop.includes('-st')){
				STIdx = prop;
			}else if(typeof obj[prop] === "object"){
				STIdx = prop;
			}else if (regex.test(prop)) {
				STIdx = obj[prop];
				if(prop == 'l4'){
					STIdx = prop;
					if(obj[STIdx] == 'data'){
						STIdx = 'data';
					}
				}
				// if(obj[prop] == 'data'){
				// 	STIdx = 'data';
				// }
			}
		}
		// console.log(STIdx)
		return STIdx;
	}
	function detectlvlHeading(obj){
		var STIdx = '';
		for (var prop in obj) {
			var regex = /^[a-zA-Z]{1}[0-9]{1}$/;
			if (prop == 'l2' || prop == 'l3') {
				STIdx = prop;
			}
		}
		return STIdx;
	}
	function sortObject(obj) {
		var newObj = [];
		for (var prop in obj) {
			var objs = {};
			if(typeof obj[prop] === "object"){
				objs[prop] = obj[prop]
				newObj.push(objs);
			}else{
				objs[prop] = obj[prop]
				newObj.unshift(objs);
			}
		}
		var fObj = {};
		for (var prop1 in newObj) {
			// console.log(prop1)
			for (var prop2 in newObj[prop1]) {
				//...