How to iterate through nested objects in JS

Question

Ok I'm stumped on this one. I need to iterate through these so I can make a listing by the category so something like

Business Books

Book 1

Book 2

Book 3

Cooking Books

etc..

But couldn't figure out how to iterate through the nested objects. With or without jquery is fine

window.books = {
 "Business Books": [
 {
 Title: "Finance 101",
 Description: "Info for Finance 101 book goes here."
 },
 {
 Title: "Economics 123",
 Description: "Info for Economics 123 book goes here."
 },
 {
 Title: "Statistics for Beginners",
 Description: "Learn about Statistics."
 }
 ],
 "Cooking Books": [
 {
 Title: "Lowfat Treats",
 Description: "Eat a lowfat Diet"
 },
 {
 Title: "Chocolate Lovers",
 Description: "Eat a lot of chocolate"
 },
 {
 Title: "Book of Brownies",
 Description: "Stuff about Brownies"
 }
 ],
 "IT Books": [
 {
 Title: "Windows XP",
 Description: "Please go away"
 },
 {
 Title: "Linux",
 Description: "A how to guide."
 },
 {
 Title: "Unix",
 Description: "All about Unix."
 },
 {
 Title: "Mac",
 Description: "Costs too much."
 }
 ],
};

• Felix Kling: Iterate over the properties of the object. Each has as value an array of objects. Iterate over the array. This requires a nested for loop. Have a look at developer.mozilla.org/en/JavaScript/Guide/…

Answer 1

Good idea is to learn how to do it without jQuery first.

for(var category in window.books) {
 if(window.books.hasOwnProperty(category)) {
 console.log(category); // will log "Business Books" etc.
 for (var i = 0, j = window.books[category].length; i < j; i++) {
 console.log("Title: %s, Description: %s", window.books[category][i].Title, window.books[category][i].Description);
 }
 }
}

Then you can use $.each().

Answer 2

$.each(window.books,function(k,v){ // k ==== key, v === value
 // Prints category
 console.log(k); 
 //Loops through category
 for(i=0,len=v.length;i<len;i++){
 console.log(v[i].Title);
 console.log(v[i].Description);
 }
 });

Answer 3

jQuery.each(window.books, function(category, items) {
 alert(category);
 jQuery.each(items, function(idx, book) {
 alert(category + ': ' + book.Title)
 });
});

Answer 4

Looping with .each() is pretty easy:

$.each(window.books, function(category, books) { 
 $("#books").append("<p>" + category + "</p><ul>"); 
 $.each(books, function(i, book) { 
 $("#books").append("<li>" + book.Title + ": " + book.Description + "</li>");
 }); 
 $("#books").append("</ul>"); 
}); 

here is my jsFiddle