Html 从JSON创建嵌套列表视图

我正在尝试使用jQuery创建嵌套的列表视图。数据位于json文件中。 看起来像这样：

{
    "fakultaeten": [
        {
            "id": "1",
            "name": "Carl-Friedrich Gauß",
            "institut": [
                "Mathematik",
                "Informatik"
            ]
        },
        {
            "id": "2",
            "name": "Lebenswissenschaften",
            "institut": [
                "Biologie/Biotechnologie",
                "Chemie/Lebensmittelchemie"
            ]
        },
        {
            "id": "3",
            "name": "Architektur, Bauingenieurwesen und Umweltwissenschaften",
            "institut": [
                "Department Architektur",
                "Department Bauingenieurwesen und Umweltwissenschaften"
            ]
        },
        {
            "id": "4",
            "name": "Maschinenbau",
            "institut": [
                "test"
            ]
        },
        {
            "id": "5",
            "name": "Elektrotechnik, Informationstechnik, Physik",
            "institut": [
                "Institut für Datentechnik und Kommunikationsnetze",
                "Institut für Elektrische Maschinen, Antriebe und Bahnen"
            ]
        },
        {
            "id": "6",
            "name": "Geistes- und Erziehungswissenschaften",
            "institut": [
                "test"
            ]
        }
    ]
}

<script type="text/javascript" charset="utf-8">
    $.getJSON("fakultaeten.js",function(data)
        {
        $.each(data.fakultaeten, function(key,value)
            {
                $.each(value.institut, function(key1,value1)
                {
                    //console.log(value1)
                }

            );
            }
        );
        return false; 
        }
    );
</script>

我这样称呼这些数据：

{
    "fakultaeten": [
        {
            "id": "1",
            "name": "Carl-Friedrich Gauß",
            "institut": [
                "Mathematik",
                "Informatik"
            ]
        },
        {
            "id": "2",
            "name": "Lebenswissenschaften",
            "institut": [
                "Biologie/Biotechnologie",
                "Chemie/Lebensmittelchemie"
            ]
        },
        {
            "id": "3",
            "name": "Architektur, Bauingenieurwesen und Umweltwissenschaften",
            "institut": [
                "Department Architektur",
                "Department Bauingenieurwesen und Umweltwissenschaften"
            ]
        },
        {
            "id": "4",
            "name": "Maschinenbau",
            "institut": [
                "test"
            ]
        },
        {
            "id": "5",
            "name": "Elektrotechnik, Informationstechnik, Physik",
            "institut": [
                "Institut für Datentechnik und Kommunikationsnetze",
                "Institut für Elektrische Maschinen, Antriebe und Bahnen"
            ]
        },
        {
            "id": "6",
            "name": "Geistes- und Erziehungswissenschaften",
            "institut": [
                "test"
            ]
        }
    ]
}

<script type="text/javascript" charset="utf-8">
    $.getJSON("fakultaeten.js",function(data)
        {
        $.each(data.fakultaeten, function(key,value)
            {
                $.each(value.institut, function(key1,value1)
                {
                    //console.log(value1)
                }

            );
            }
        );
        return false; 
        }
    );
</script>

$.getJSON（“fakultaeten.js”，函数（数据）
{
$.each（data.fakultaeten，函数（键，值）
{
$.each（value.institut，函数（键1，值1）
{
//console.log（值1）
}
);
}
);
返回false；
}
);

现在我有点困惑如何在这个HTML代码中显示数据

<div data-role="content">
    <h3>Institut für Nachrichtentechnik</h3>
    <ul id="taskList" data-role="listview"></ul>
</div>

法国国立技术研究所

我知道这是一个基本问题，但我发现的所有其他问题和教程都让我感到困惑

---

我希望嵌套列表在这个演示中看起来像这样：

非常简单：只需将列表值放入id为

taskList的列表中即可：

<script type="text/javascript" charset="utf-8">
        $.getJSON("fakultaeten.js",function(data)
        {
        var list = $('#taskList');
        $.each(data.fakultaeten, function(key,value)
            {
                var mother = "<li>"+value.name+"<ul>";
                $.each(value.institut, function(key1,value1)
                {
                    var son="<li>"+value1+"</li>";
                    mother+=son;
                }  
            );
                mother+="</ul></li>";
                list.append(mother);  
            }                
        );
        list.listview("refresh");
        return false; 
        }
    );
    </script>


$.getJSON（“fakultaeten.js”，函数（数据）
{
变量列表=$（“#任务列表”）；
$.each（data.fakultaeten，函数（键，值）
{
var mother=“
”+value.name+”
”；
$.each（value.institut，函数（键1，值1）
{
var-son=“
”+value1+”
”；
母亲+儿子；
}  
);
母亲+=“
”；
列表。追加（母亲）；
}                
);
列表视图（“刷新”）；
返回false；
}
);
多亏了@JackTurky，我得到了解决方案。他几乎是对的

最后我就是这样解决的

<script type="text/javascript" charset="utf-8">
$.getJSON("fakultaeten.js",function(data)
            {
            var list = $('#taskList');
            $.each(data.fakultaeten, function(key,value)
                {
                    var mother = "<li>"+value.name+"<ul>";
                    $.each(value.institut, function(key1,value1)
                    {
                        var son="<li>"+value1+"</li>";
                        mother+=son;
                    }  
                );
                    mother+="</ul></li>";
                    list.append(mother);  
                }                
            );
            list.listview("refresh");
            return false; 
            }
        );
</script>


$.getJSON（“fakultaeten.js”，函数（数据）
{
变量列表=$（“#任务列表”）；
$.each（data.fakultaeten，函数（键，值）
{
var mother=“
”+value.name+”
”；
$.each（value.institut，函数（键1，值1）
{
var-son=“
”+value1+”
”；
母亲+儿子；
}  
);
母亲+=“
”；
列表。追加（母亲）；
}                
);
列表视图（“刷新”）；
返回false；
}
);
您希望它看起来像什么？就像这个演示中的一样：谢谢，但这不是我的问题。我想要一个嵌套列表，如本演示中所示：我建议选择
列表[0]。innerHTML+=“
”+value1+”
“
，这与
$.append（）
，尤其是对于许多元素而言是一个比较好的选择。@lornz为什么不从演示中填充结构，只使用jQuery mobile的嵌套列表插件呢？@lornz查看我的编辑。我没有看到jquery mobile。。很抱歉现在试试，我在哪里可以找到那个插件？！