JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result"></div>

JavaScript

var data = [{
        'text': 'Subjects',
        'data': [{
            'text': 'Geography',
            'data': []
        }, {
            'text': 'History',
            'data': [{
                'text': 'Ancient History',
                'data': []
            }]
        }]
    }, {
        'text': 'Sports',
        'data': []
    }, {
        'text': 'Music',
        'data': []
    }];


function json_tree(object) {
    var json = "<ul>";
    for (prop in object) {
        console.log('key: ' + prop);
        console.log('val: ' + JSON.stringify(object[prop]));
        var value = object[prop];
        switch (typeof(value)) {
            case "object":
                console.log('object');
                json += "<li>" + value.text + json_tree(value) + "</li>";
                break;
            default:
                console.log('not obj');
                json += "<li>" + value.text + "</li>";
        }
    }
    return json + "</ul>";
}

document.getElementById("result").innerHTML = json_tree(data);