Create nested list view from JSON

Question

I'm trying to create a nested listed view with jQuery. The data is in a json file. Looks like this:

{
    "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"
            ]
        }
    ]
}

I'm calling the data like this:

<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>

Now I'm a little confused how to display the data in this HTML code.

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

I know it's a basic problem, but all the other questions and tutorials I found are really confusing me.

I want the nested list look like in this demo: http://jquerymobile.com/demos/1.2.1/docs/lists/lists-nested.html#&ui-page=2-4

Answer 1

it's very simple: just put list value inside the list with 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

Thanks to @JackTurky I got the solution. He was almost right.

This is how I solved it in the end.

<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>