4

我对 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 它重复所有品牌数组数据时。它正确显示“图像”值并显示“品牌”数组中的所有数据，但重复“品牌”数组数据。结果显示如下：

图片1.jpg

  • 图 1 公司
  • 图 1 公司 2
  • 图 2 公司 1
  • 图 2 公司 2
  • 图 2 公司 3
  • 图 3 公司 1
  • 图 3 公司 2

图片2.jpg

  • 图 1 公司 2
  • 图 2 公司 1
  • 图 2 公司 2
  • 图 2 公司 3
  • 图 3 公司 1
  • 图 3 公司 2

图片3.jpg

  • 图 3 公司 1
  • 图 3 公司 2

结果应该在哪里：

图片1.jpg

  • 图 1 公司
  • 图 1 公司 2

图片2.jpg

  • 图 2 公司 1
  • 图 2 公司 2
  • 图 2 公司 3

图片3.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>

谢谢！

4

2 回答 2

4

引用您刚刚创建的 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-27T19:44:16.997 回答
0

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

尝试类似：

$.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-27T19:52:48.567 回答