user1547007
Reputation: 267
Dynamic unordered list rendering from json with jQuery
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:
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('') );
});
});
Upvotes: 1
Views: 1669
Answers (1)
Satya Gupta
Reputation: 46
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.
Upvotes: 1
Related Questions
- Generate unordered list from JSON Data?
- json to nested unordered list
- Create a dynamic list using JSON and jquery
- Build json string from unordered list
- dynamically displaying JSON values in list format
- Create dynamic nested list from JSON using jQuery
- How to get JSON and show it with unordered list in HTML?
- load JSON in unordered list with $.getJSON
- Create unordered list from JSON object using JS (jQuery)
- Output JSON object from unordered list with jQuery