JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

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

CSS

#output {
    font-family: "Courier New";
}

JavaScript

var dataSource = {
    "Items": {
        "Deserts": {},
        "Veg": {
            "VegPulao": "Veg Pulao",
            "PalakPaneer": "Palak Paneer",
            "PaneerButterMasala": "Paneer Butter Masala"
        },
        
        "Chicken": {
            "Tandoori": "Tandoori special"
        },
        "Hot drinks": {
            "Coffe": { "Hot": "Hot Coffe", "Medium": "Medium", "Others": { "Iris": "Iris Coffe", "Capuccino": "Capuccino" } },
            "Tea": {"Red": "Red Tea", "Black": "Black Tea"},
            "BadamMilk": "Hot Badam Milk",
            "Bornvita": "Hot Bornvita",
            "Milk": "Hot Milk"
        },
        "Juice": {
            "Mango": "Mango",
            "Berry": "Berry",
            "Grapes": "Grapes",
            "Wine": {
                "Rose": "Rose",
                "Red wine": "Red",
                "Apple": "Apple",
                "Hard drinks": {
                    "Royal challenge": "Royal challenge",
                    "Blender's Pride": "Blender's Pride"
                }
            }
        }
    }
};

function output(str, level) {
    var obj = document.getElementById("output");
    var div = document.createElement("div");
    var node = document.createTextNode(str);
    div.style.marginLeft = (level * 20) + "px";
    div.appendChild(node);
    obj.appendChild(div);
}

function traverseObject(obj, level) {
    for (var prop in obj) {
        if (typeof obj[prop] === "object") {
            output(prop, level);
            traverseObject(obj[prop], level + 1);
        } else {
            output(prop + ": " + obj[prop], level);
        }
    }
}

traverseObject(dataSource, 0);