JSFiddle - React, Tailwind, and code Playground

by Parvez Ali

HTML

<table>
        <tr>
            <td>
                <div id="dvList1">
                </div>
            </td>
            <td>
                <a href="#" id="hlGSL">Generate Sorted list</a>
            </td>
            <td>
                <div id="dvList2">
                </div>
            </td>
        </tr>
    </table>

CSS

#dvList1{
	 font-family: "Courier New";
	 border: 1px solid black;
	 width: 400px;
	 height: 500px;
	 overflow: scroll;
}
#dvList2{
	 font-family: "Courier New";
	 border: 1px solid black;
	 width: 400px;
	 height: 500px;
	 overflow: scroll;
}

ul {
    list-style: none;
}

li.hidden ul {
    display: none;
}

li:before {
	
    content: "-";
	padding-right:25px;
    width: 10px;
    display: inline-block;
}

li.hidden:before {
	content:"+";
	padding-right:25px;
    
}

li.leaf:before {
    content: "";
	padding-right:25px;
}

li {
    cursor: pointer;
}

li.leaf {
    cursor: default;
}

JavaScript

var dataSource = ({
    "Pen": ({
        "Parker": ({
                "P1": ({}),
                "P2": ({})
        }),
            "Cello": ({
                "C2": ({}),
                "C1": ({})
        })
    })
}),
    traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li;

        for (var prop in obj) {
            li = document.createElement("li");
	        li.appendChild(document.createTextNode(prop));
            li.onclick = function(e) {
                e.currentTarget.classList.toggle("hidden");
                e.stopPropagation();
            }
            if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) {
                li.appendChild(traverseObject(obj[prop]));
            } else {
                li.classList.add("leaf");
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    },
    sortedObject = function (obj) {
		document.getElementById("dvList2").innerHTML = "";
        var ul = document.createElement("ul"),
            li;
        var keys = Object.keys(obj).sort();
        for (prop in keys) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(keys[prop]));
            li.onclick = function(e) {
                e.currentTarget.classList.toggle("hidden");
                e.stopPropagation();
            }

            if (typeof obj[keys[prop]] == "object" && Object.keys(obj[keys[prop]]).length) {
                li.appendChild(sortedObject(obj[keys[prop]]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };
window.onload = function () {
    document.getElementById("dvList1").appendChild(traverseObject(dataSource));
	document.getElementById("hlGSL").onclick = function(){document.getElementById("dvList2").appendChild(sortedObject(dataSource));}

	
}