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

Like in this Demo: jquerymobile.com/demos/1.2.1/docs/lists/… — lornz
– lornz, Commented Jul 31, 2013 at 14:08

Nunser · Accepted Answer · 2013-07-31 14:42:36Z

2

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>

edited Jul 31, 2013 at 14:42

Nunser

4,5228 gold badges27 silver badges37 bronze badges

answered Jul 31, 2013 at 14:06

Jayyrus

13.1k41 gold badges136 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

lornz Over a year ago

Thanks, but that is not my problem. I want a nested list, like in this Demo: jquerymobile.com/demos/1.2.1/docs/lists/…

Jeff Noel Over a year ago

I would suggest opting for list[0].innerHTML+="<li>"+value1+"</li>", that's a huge performance gap compared to $.append(), especially for a lot of elements.

Jeff Noel Over a year ago

@lornz Why don't you fill the structure from the demo and just use jQuery mobile's nested list plugin?

Jayyrus Over a year ago

@lornz see my edit. I didn't see jquery mobile.. sorry.. try it now

lornz Over a year ago

where can I find that plugin?!

|

lornz · Accepted Answer · 2013-07-31 14:39:14Z

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>

Collectives™ on Stack Overflow

Create nested list view from JSON

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related