Question

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

Img 1 Company
Img 1 Company 2
Img 2 Company 1
Img 2 Company 2
Img 2 Company 3
Img 3 Company 1
Img 3 Company 2

Img2.jpg

Img 1 Company 2
Img 2 Company 1
Img 2 Company 2
Img 2 Company 3
Img 3 Company 1
Img 3 Company 2

Img3.jpg

Img 3 Company 1
Img 3 Company 2

结果应该是：

Img1.jpg

Img 1 Company
Img 1 Company 2

Img2.jpg

Img 2 Company 1
Img 2 Company 2
Img 2 Company 3

Img3.jpg

Img 3 Company 1
Img 3 Company 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>

谢谢！

Answer 1

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

Answer 2

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

尝试类似：

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

jquery getJSON和$ .each循环通过未链接到父索引的子数组

2 个答案: