Dynamic unordered list rendering from json with jQuery

Question

I am trying to build a dynamic unordered list with nested child ul list levels(actually 4+ sub levels), I am having hard time rendering the actual markup I need, so at a later stage I can make it more functional, I created at the following link jsfiddle, the html markup looks like:

         <ul class="nav nav-sidebar">
          <li class="dropdown">
            <a href="#">theatre_name: Americas <i class="ion-chevron-down text-primary pull-right"></i></a>
            <ul class="">
              <li class="dropdown">
                <a href="#">location_name: USA</a>
                <ul class="">
                  <li>
                    <a href="#">Living in USA</a>
                    <ul class="">
                      <li><a href="#">123 John Doe</a></li>
                      <li><a href="#">534 John Doe</a></li>
                      <li><a href="#">9728 John Doe</a></li>
                      <li><a href="#">7668 John Doe</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">What to do in USA</a>
                    <ul>
                      <li><a href="#">Fishing</a></li>
                      <li><a href="#">Skiing</a></li>
                      <li><a href="#">Hicking</a></li>
                      <li><a href="#">Running</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Visiting in USA</a>
                    <ul>
                      <li><a href="#">By Car</a></li>
                      <li><a href="#">By Air</a></li>
                      <li><a href="#">By Boat</a></li>
                      <li><a href="#">Walking</a></li>
                    </ul>
                  </li>
                </ul>
              </li> <!-- /.dropdown -->
              <li class="dropdown">
                <a href="#">location_name: Mexico</a>
                <ul class="">
                  <li>
                    <a href="#">Living in Mexico</a>
                    <ul class="">
                      <li><a href="#">123 Juan Lopez</a></li>
                      <li><a href="#">534 Juan Lopez</a></li>
                      <li><a href="#">9728 Juan Lopez</a></li>
                      <li><a href="#">7668 Juan Lopez</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">What to do in Mexico</a>
                    <ul>
                      <li><a href="#">Fishing</a></li>
                      <li><a href="#">Skiing</a></li>
                      <li><a href="#">Hicking</a></li>
                      <li><a href="#">Running</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Visiting in Mexico</a>
                    <ul>
                      <li><a href="#">Por Auto</a></li>
                      <li><a href="#">Por Avion</a></li>
                      <li><a href="#">Por Barco</a></li>
                      <li><a href="#">Caminando</a></li>
                    </ul>
                  </li>
                </ul>
              </li> <!-- /.dropdown -->
            </ul>
          </li> <!-- /.dropdown -->
      </ul> <!-- ul -->

After rendering, the markup should look like the following image:

enter image description here

This is the json data.

{
            "user_id": "01010101",
            "user_name": "John Doe",
            "super_user": true,
            "theatre": {
                "theatre_name": "americas",
                "locations": [
                    {
                        "location_name": "USA",
                        "events": [
                            {
                                "event_name": "living in Palo Alto",
                                "people": [
                                    "123 John Doe",
                                    "534 John Doe",
                                    "9728 John Doe",
                                    "7668 John Doe"
                                ]
                            },
                            {
                                "event_name": "What to do in Palo Alto",
                                "people": [
                                    "Fishing",
                                    "Skying",
                                    "Hiking",
                                    "Running"
                                ]
                            },
                            {
                                "event_name": "Visiting in Palo Alto",
                                "people": [
                                    "By Car",
                                    "By Air",
                                    "By Boat",
                                    "Walking"
                                ]
                            }
                        ]
                    }
                ],
                "theatre_name": "Europa",
                "locations": [
                    {
                        "location_name": "Spain",
                        "events": [
                            {
                                "event_name": "living in Barcelona",
                                "people": [
                                    "123 Juan Garza",
                                    "534 Juan Garza",
                                    "9728 Juan Garza",
                                    "7668 Juan Garza"
                                ]
                            },
                            {
                                "event_name": "What to do in Barcelona",
                                "people": [
                                    "Fishing",
                                    "Skying",
                                    "Hiking",
                                    "Running"
                                ]
                            },
                            {
                                "event_name": "Visiting in Barcelona",
                                "people": [
                                    "By Car",
                                    "By Air",
                                    "By Boat",
                                    "Walking"
                                ]
                            }
                        ]
                    }
                ],
                "theatre_name": "Asia",
                "locations": [
                    {
                        "location_name": "China",
                        "events": [
                            {
                                "event_name": "living in Beijing",
                                "people": [
                                    "123 Wei Zhang",
                                    "534 Wei Zhang",
                                    "9728 Wei Zhang",
                                    "7668 Wei Zhang"
                                ]
                            },
                            {
                                "event_name": "What to do in Beijing",
                                "people": [
                                    "Fishing",
                                    "Skying",
                                    "Hiking",
                                    "Running"
                                ]
                            },
                            {
                                "event_name": "Visiting in Beijing",
                                "people": [
                                    "By Car",
                                    "By Air",
                                    "By Boat",
                                    "Walking"
                                ]
                            }
                        ]
                    }
                ]
            }
        }

This is a JavaScript I found but need some work to make it functional, how do I loop through the json objects, pull the data and generate the needed markup?

$(function(){
            $.getJSON('./JSON/latest.json', function(data) {
                var items = [];
                $.each(data, function(i, item) {
                items.push('<li><a href="' + link + '">' + pName + '</a><span class="vTitle">' + vTitle + '</span>' + shortDesc + '</li>');
                });
                $('#latestList').append( items.join('') );
            });
        });

@Rakesh_Kumar This is the fiddle link jsfiddle.net/creativestudio/jk69je6t — user1547007
– user1547007, Commented Mar 5, 2015 at 5:25

Satya Gupta · Accepted Answer · 2015-03-05 06:41:14Z

1

here is how you do it,

 $(document).ready(function(){
    $("body").append(list_theatre(events.theatre));
})

function list_theatre(jsonObject){
    var newUl = $("<ul/>");
    var newLi = $("<li/>");
    $.each(jsonObject,function(index,object){
        var newLi = $("<li/>");
        newLi.append('<a href="#">theatre_name: '+object.theatre_name+' <i class="ion-chevron-down text-primary pull-right"></i></a>');
        newLi.append(list_locations(object.locations));
        newUl.append(newLi);
    })
    return newUl;
}

function list_locations(jsonObject){
    var newUl = $("<ul/>");
    var newLi = $("<li/>");
    $.each(jsonObject,function(index,object){
        var newLi = $("<li/>");
        newLi.append('<a href="#">location_name: '+object.location_name+'</a>');
        newLi.append(list_events(object.events));
        newUl.append(newLi);
    })
    return newUl;
}

function list_events(jsonObject){
    var newUl = $("<ul/>");
    var newLi = $("<li/>");
    //console.log(jsonObject);
    $.each(jsonObject,function(index,object){
        var newLi = $("<li/>");
        newLi.append('<a href="#">'+object.event_name+'</a>');      
        newLi.append(list_people(object.people));
        newUl.append(newLi);
    })
    return newUl;
}

function list_people(jsonObject){
    var newUl = $("<ul/>");
    var newLi = $("<li/>");
    $.each(jsonObject,function(index,text){
        var newLi = $("<li/>");
        newLi.append('<a href="#">'+text+'</a>');
        newUl.append(newLi);
    })
    return newUl;
}

I had to change the json a bit. Since theatre is a collection, its need be an array of json objects.

Find the complete js along with json here: http://jsfiddle.net/satyagupta/vabnyzvv/1/

Also you can minify the codes a bit by adding a bit of recursion to it.

edited Mar 5, 2015 at 6:41

answered Mar 5, 2015 at 6:21

Satya Gupta

465 bronze badges

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

3 Comments

user1547007 Over a year ago

@satye Gupta Can I see how the json looks like after your modifications? the jsfiddle is not updated.

Satya Gupta Over a year ago

$user1547007 i have added the updated jsfiddle link jsfiddle.net/satyagupta/vabnyzvv/1

Satya Gupta Over a year ago

BTW the change is that the theatre is now a collection theatre : [{...},{...},{...}] its like this now.

Collectives™ on Stack Overflow

Dynamic unordered list rendering from json with jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related