jquery getJSON 和 $.each 循环遍历未链接到父索引的子数组答案

【问题标题】：jquery getJSON and $.each looping through child array not linked to parent indexjquery getJSON 和 $.each 循环遍历未链接到父索引的子数组
【发布时间】：2012-12-13 04:09:50
【问题描述】：

我对 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

我不知道如何让brands 数组只显示父对象的数据。这是我的 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>

谢谢！

【问题讨论】：

标签： jquery json each

【解决方案1】：

您没有告诉它添加值的特定容器。多个无序列表被选中并附加到。

尝试类似：

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

【讨论】：

【解决方案2】：

引用您刚刚创建的 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>');
     })
});

【讨论】：

穆萨做到了。非常感谢！