如何在 JS 中遍历嵌套对象答案

【问题标题】：How to iterate through nested objects in JS如何在 JS 中遍历嵌套对象
【发布时间】：2012-06-27 16:18:27
【问题描述】：

好吧，我被这个难住了。我需要遍历这些，以便可以按类别列出类似

商业书籍

第一册

第二册

第三册

烹饪书籍

等等。

但不知道如何遍历嵌套对象。有没有 jquery 都可以

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."
       }
    ],
};

【问题讨论】：

迭代对象的属性。每个都有一个对象数组作为值。遍历数组。这需要一个嵌套的 for 循环。看看developer.mozilla.org/en/JavaScript/Guide/…

标签： javascript jquery object nested

【解决方案1】：

最好先学习如何在不使用 jQuery 的情况下进行操作。

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);
    }
  }
}

那么你可以使用$.each()。

【讨论】：

【解决方案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);
        }
    });

【讨论】：

【解决方案3】：

jQuery.each(window.books, function(category, items) {
    alert(category);

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

【讨论】：

【解决方案4】：

使用 .each() 循环非常简单：

$.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>");                                                    
});

这是我的jsFiddle

【讨论】：