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(data) {
    var json = "<ul>";
    
    for(var i = 0; i < data.length; ++i) {
        json = json + "<li>" + data[i].text;
        if(data[i].data.length) {
            json = json + json_tree(data[i].data);
        }
        json = json + "</li>";
    }
    return json + "</ul>";
}

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