Json - 如何创建ajax进程以按主题循环嵌套数组到子主题

Question

我想使用json创建一个虚拟数据，它可以输出如下图所示的输出。

所以，我用这样的json数据启动了代码 {

        "Test":
            [
                { "id": "1", "title": "Title 1" },
                { "id": "2", "title": "Title 2" },
                { "id": "3", "title": "Title 3" },
                { "id": "4", "title": "Title 4" }
            ],

        "Test2":
            [
                { "id": "5", "title": "Title 5" },
                { "id": "6", "title": "Title 6" },
                { "id": "7", "title": "Title 7" },
                { "id": "8", "title": "Title 8" }
            ]

}

这是我正在尝试的ajax进程，我坚持在里面实现代码。

<script>
function ajax_get_json(){
    var results = document.getElementById("results");
     var hr = new XMLHttpRequest();
     hr.open("GET", "subject_list.json", true);
     hr.setRequestHeader("Content-type", "application/json", true);
     hr.onreadystatechange = function() {
         if(hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
                results.innerHTML = "";

                // here maybe some code to be implemented

             } 
        }
      hr.send(null);
      results.innerHTML = "requesting...";
    } 
</script>

<div id="results"></div> 
<script>ajax_get_json();</script>