Question

我正在尝试使用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>

现在我对如何在此HTML代码中显示数据感到困惑。

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

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

我希望嵌套列表看起来像这个演示：http://jquerymobile.com/demos/1.2.1/docs/lists/lists-nested.html#&ui-page=2-4

Answer 1

非常简单：只需将列表值放入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>

Answer 2

感谢@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>

从JSON创建嵌套列表视图

2 个答案: