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"
                }
                ]
    }
]

'brands'配列データを親オブジェクトでのみ表示したい。console.logに表示すると正しいのですが、.appendすると、すべてのブランド配列データが繰り返されます。'images'値を正しく表示し、'brands'配列からのすべてのデータを表示しますが、'brands'配列データを繰り返します。結果は次のように表示されます。

Img1.jpg

  • Img1会社
  • Img1会社2
  • Img2会社1
  • Img2会社2
  • Img 2 Company 3
  • Img3会社1
  • Img3会社2

Img2.jpg

  • Img1会社2
  • Img2会社1
  • Img2会社2
  • Img 2 Company 3
  • Img3会社1
  • Img3会社2

Img3.jpg

  • Img3会社1
  • Img3会社2

結果は次のようになります。

Img1.jpg

  • Img1会社
  • Img1会社2

Img2.jpg

  • Img2会社1
  • Img2会社2
  • Img 2 Company 3

Img3.jpg

  • Img3会社1
  • Img3会社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>

ありがとう！

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 に答える