jquery getJSON和$。每個循環通過未鏈接到父索引的子數組

我對jQuery和JSON很新，對這個站點也是全新的。

我正在嘗試使用jQuery顯示來自JSON文件的數據。

JSON示例：

[ 
    { 
     "show":"swim", 
     "image": "Img1.jpg", 
     "brands": 
       [ 
       { 
       "brand":"Img 1 Company", 
       "YAH": "Img 1 YAH" 
       }, 
       { 
       "brand":"Img 1 Company 2", 
       "YAH": "Img 1 YAH 2" 
       } 
       ] 
    }, 
    { 
     "show":"swim", 
     "image":"Img2.jpg", 
     "brands": [ 
       { 
       "brand":"Img 2 Company 1", 
       "YAH": "Img 2 YAH 1" 
       }, 
       { 
       "brand":"Img 2 Company 2", 
       "YAH": "Img 2 YAH 2" 
       }, 
       { 
       "brand":"Img 2 Company 3", 
       "YAH": "Img 2 YAH 3" 
       } 
       ] 
    }, 
    { 
     "show":"resort", 
     "image":"Img3.jpg", 
     "brands": [ 
       { 
       "brand":"Img 3 Company 1", 
       "YAH": "Img 3 YAH 1" 
       }, 
       { 
       "brand":"Img 3 Company 2", 
       "YAH": "Img 3 YAH 2" 
       } 
       ] 
    } 
]

我想要「品牌的陣列數據僅與父對象顯示。當我顯示到console.log是正確的，但是當我.append它重複所有品牌陣列數據。它正確顯示'圖像'值，它顯示'品牌'數組中的所有數據，但重複'品牌'數組數據。結果顯示這樣的：

Img1.jpg

圖1公司
圖1家公司2
圖2公司1
圖2公司2
圖2公司3
圖3公司1
圖3公司2

Img2.jpg

圖1家公司2
圖2公司1
圖2公司2
圖2公司3
圖3公司1
圖3公司2

Img3.jpg

圖3公司1
圖3公司2

凡結果應該是：

Img1.jpg

圖1家公司
圖1公司2

Img2.jpg

圖2公司1
圖2公司2
圖2公司3

IMG3。JPG

圖3公司1
圖3公司2

我不能找出如何使品牌陣列只對父對象顯示數據。這是我的HTML和腳本

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<meta charset="utf-8" /><body> 
<div id="ImageGallery"></div> 

<script> 
$.getJSON('js/data.json', function(json) { 
    $.each(json,function(i, value){ 
     $('#ImageGallery').append('<p>'+ value.image + '</p><ul class="brands"></ul>'); 
    $.each(value.brands, function(index, obj){ 
     $('ul.brands').append('<li>'+ obj.brand +'</li>'); 
    }) 
     }); 
}); 
</script> 
</body>

謝謝！

來源

2012-12-27 user1932852

請參考您剛創建的ul，並從.each回調中調用它。

$.each(json,function(i, value){ 
    $('#ImageGallery').append('<p>'+ value.image + '</p>'); 
    $ul = $('<ul class="brands"></ul>').appendTo('#ImageGallery'); 
    $.each(value.brands, function(index, obj){ 
     $ul.append('<li>'+ obj.brand +'</li>'); 
    }) 
});

來源

2012-12-27 19:44:16 Musa

穆薩說做到了。非常感謝！ – user1932852

@ user1932852不客氣 – Musa

你沒有告訴它要添加值的特定容器。多個無序列表被選中並附加到。

嘗試類似：

$.getJSON('js/data.json', function(json) { 
    $.each(json,function(i, value){ 
     $('#ImageGallery').append('<p>'+ value.image + '<ul class="brands"></ul></p>'); 
     $.each(value.brands, function(index, obj){ 
      $('#ImageGallery p:last').children('ul.brands').append('<li>'+ obj.brand +'</li>'); 
     }) 
    }); 
});

來源

2012-12-27 19:52:48 vortextangent

jquery getJSON和$。每個循環通過未鏈接到父索引的子數組

回答

相關問題