使用assosiative陣列獲取迭代在$。每個

Question

JSON：

{ 
    "bk00001": { 
     "path": "books/bk00001/", 
     "lang": "ar", 
     "title": [ 
      "Book 1", 
      "Book 1" 
     ] 
    }, 
    "bk00002": { 
     "path": "books/bk00002/", 
     "lang": "ar", 
     "title": [ 
      "Book 2", 
      "Book 2" 
     ] 
    } 
} 

的jQuery：

$.getJSON(catalog, function(data, status) { 
    var items = []; 
    $.each(data, function(id, meta) { 
     items.push("<li class='" + id + "'>" + meta.path + "</li>"); 
     items.push("<li class='" + id + "'>" + meta.lang + "</li>"); 
     items.push("<li class='" + id + "'>" + meta.title + "</li>"); 
    }); 

    $("<ul/>", { 
     "id": "library", 
     html: items.join("") 
    }).appendTo("body"); 

}); 

..但輸出是不是我所期望的，那是因爲id返回的是實際的關鍵該對象，而不是循環的索引。

這是預期輸出：

<ul id="library"> 
    <ul id="bk00001"> 
     <li class="path">...</li> 
     <li class="lang">...</li> 
     <li class="title">...</li> 
     ... 
    </ul> 
    <ul id="bk00002"> 
     <li class="path">...</li> 
     <li class="lang">...</li> 
     <li class="title">...</li> 
     ... 
    </ul> 
</ul> 

Answer 1

除非有什麼特別的理由不這樣做的簡單的事情，這是你想要什麼：

//... 
//... 
$.each(data, function(id, meta) { 
     items.push("<ul id='" + id + "'>"); 
     items.push("<li class='path'>" + meta.path + "</li>"); 
     items.push("<li class='lang'>" + meta.lang + "</li>"); 
     items.push("<li class='title'>" + meta.title + "</li>"); 
     items.push("</ul>"); 
    }); 
//... 
//... 

Answer 2

從jquery documentation：

如果一個對象用作集合，回調是pa ssed一個 鍵 - 值對每個時間：

這裏是我會做：

$.getJSON(catalog, function(data, status) { 
    var library = $("<ul id='library'/>"); 
    $.each(data, function(id, meta) { 
     var ul = $("<ul id='" + id + "'/>"); 
     ul.append("<li class='path'>" + meta.path + "</li>"); 
     ul.append("<li class='lang'>" + meta.lang + "</li>"); 
     ul.append("<li class='title'>" + meta.title + "</li>"); 
     library.append(ul); 
    }); 

    library.appendTo("body"); 
});