10908


下記の様なコードでボタン毎に読み込むjsonオブジェクトを切り替えて、画像を読み込みたいのですが、そもそもそういった事は可能でしょうか？

[code]

    $(document).ready(function(){
      $('button').on('click', function(this){
        $.ajax({
          type: 'GET',
          url: 'data-url.json',
          datatype: 'json',
          success: function(json) {
            $.each(json, function(i, activity) {
              var imgUrl = activity[i].img;
              $('#output1').append('<img src=' + imgUrl + '>');
            })
          },
          error: function() {
            console.log('error');
          }
        });
      });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <button data-attr="sports">Load More</button>
    <button data-attr="workshop">Load More</button>
    <button data-attr="culture">Load More</button>
    
    <div id="output1"></div>
    <div id="output2"></div>
    <div id="output3"></div>
[/code]

[code]

    [{
     "sports" : [
      {"name" : "soccer", "img" : "aaa.jpg"},
      {"name" : "baseball", "img" : "aaa.jpg"},
      {"name" : "tennis", "img" : "aaa.jpg"},
      {"name" : "swimming", "img" : "aaa.jpg"}
     ]
    },
    {
     "workshop" : [
      {"name" : "Traditional Craft", "img" : "bbb.jpg"},
      {"name" : "Ikebana", "img" : "bbb.jpg"},
      {"name" : "Washi", "img" : "bbb.jpg"},
      {"name" : "Miso Making", "img" : "bbb.jpg"}
     ]
    },
    {
     "culture" : [
      {"name" : "Zen", "img" : "ccc.jpg"},
      {"name" : "Ninja", "img" : "ccc.jpg"},
      {"name" : "Kimono", "img" : "ccc.jpg"},
      {"name" : "Cat Cafe", "img" : "ccc.jpg"}
     ]
    }]
[/code]


CC BY-SA 3.0
2015-06-02T09:07:40.620
10894
2019-12-13T18:08:35.503
8500
question
javascript jquery json ajax
attrによって読み込むajaxを振り分けたい


`append('<img src=' + imgUrl + '>')`での画像表示は可能です。  
JSONデータの構造とアクセスの仕方が間違っています。

`getJsonData`は実行確認のためのダミーメソッドです。  
実際は`success: function(json)`で取れるデータですので適宜読み替えてください。

画像のリンクは存在しないので`alt`属性の文字が表示されますが、正しい画像リンクであれば画像が表示されます。

[code]

    $(document).ready(function(){
        $('button').on('click', function(){
            activityType = $(this).attr('data-attr');
            // JSONデータが取れた前提
            json = getJsonData()
            // success: function(json)内に書くロジック
            $.each(json, function(i, activity) {
                if(activityType != activity.type){
                    return;
                }
                $.each(activity.list, function(j, list) {
                    $('#output1').append('<img src="' + list.img + '" alt="' + list.name + '"><br />');
                });
            });
        });
    });
    
    // $.ajax()の代わり
    function getJsonData(){
        return [
            {
                "type" : "sports",
                "list" : [
                    {"name" : "soccer", "img" : "aaa.jpg"},
                    {"name" : "baseball", "img" : "aaa.jpg"},
                    {"name" : "tennis", "img" : "aaa.jpg"},
                    {"name" : "swimming", "img" : "aaa.jpg"}
                ]
            },
            {
                "type" : "workshop",
                "list" : [
                    {"name" : "Traditional Craft", "img" : "bbb.jpg"},
                    {"name" : "Ikebana", "img" : "bbb.jpg"},
                    {"name" : "Washi", "img" : "bbb.jpg"},
                    {"name" : "Miso Making", "img" : "bbb.jpg"}
                ]
            },
            {
                "type" : "culture",
                "list" : [
                    {"name" : "Zen", "img" : "ccc.jpg"},
                    {"name" : "Ninja", "img" : "ccc.jpg"},
                    {"name" : "Kimono", "img" : "ccc.jpg"},
                    {"name" : "Cat Cafe", "img" : "ccc.jpg"}
                ]
            }
        ];
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <button data-attr="sports">Load More</button>
    <button data-attr="workshop">Load More</button>
    <button data-attr="culture">Load More</button>
    
    <div id="output1"></div>
    <div id="output2"></div>
    <div id="output3"></div>
[/code]


CC BY-SA 3.0
2015-06-02T09:58:56.480
10898
2015-06-02T09:58:56.480
7214
10894
answer


質問に書かれたJSONの場合、各要素には次のようにしてアクセスできます。

[code]

    [ // json
        { // json[0]
            "sports" : [ // json[0]["sports"]
                {"name" : "soccer", "img" : "aaa.jpg"}, // json[0]["sports"][0]
                {"name" : "baseball", "img" : "aaa.jpg"}, // json[0]["sports"][1]
                {"name" : "tennis", "img" : "aaa.jpg"},
                {"name" : "swimming", "img" : "aaa.jpg"}
            ]
        },
        { // json[1]
            "workshop" : [ // json[1]["workshop"]
    ...
    
[/code]

この場合kotatsuさんの回答のように、配列を順番に見ないと `sports` や `workshop`
にたどり着けません。代わりに次のようにしてはいかがでしょうか。

[code]

    { // json
        "sports" : [ // json["sports"]
            {"name" : "soccer", "img" : "aaa.jpg"}, // json["sports"][0]
            {"name" : "baseball", "img" : "aaa.jpg"}, // json["sports"][1]
            {"name" : "tennis", "img" : "aaa.jpg"},
            {"name" : "swimming", "img" : "aaa.jpg"}
        ],
        "workshop" : [ // json["workshop"]
            {"name" : "Traditional Craft", "img" : "bbb.jpg"}, //json["workshop"][0]
    ...
    
[/code]

こうしておけば、以下のような流れで達成できるかと思います。

[code]

    var activityType = $(this).attr('data-attr');
    
    // jsonを取得してから、
    var items = json[activityType];
    $.each(items, function(i, item) {
        var imgUrl = item.img;
        ...
    });
    
[/code]

サンプル <http://jsfiddle.net/njr793vd/3/>

[code]

    var sample = {
      "sports": [{
          "name": "soccer",
          "img": "http://dummyimage.com/20x20/aaa/fff"
        },
        {
          "name": "baseball",
          "img": "aaa.jpg"
        },
        {
          "name": "tennis",
          "img": "aaa.jpg"
        },
        {
          "name": "swimming",
          "img": "aaa.jpg"
        }
      ],
      "workshop": [{
          "name": "Traditional Craft",
          "img": "http://dummyimage.com/20x20/afa/fff"
        },
        {
          "name": "Ikebana",
          "img": "bbb.jpg"
        },
        {
          "name": "Washi",
          "img": "bbb.jpg"
        },
        {
          "name": "Miso Making",
          "img": "bbb.jpg"
        }
      ],
      "culture": [{
          "name": "Zen",
          "img": "http://dummyimage.com/20x20/ffa/fff"
        },
        {
          "name": "Ninja",
          "img": "ccc.jpg"
        },
        {
          "name": "Kimono",
          "img": "ccc.jpg"
        },
        {
          "name": "Cat Cafe",
          "img": "ccc.jpg"
        }
      ]
    };
    
    $('button').on('click', function() {
      // 省略しましたが、引数にはEventオブジェクトが渡されます
    
      // この時点でthisはイベントを受け取った要素
      var activityType = $(this).attr('data-attr');
    
      $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
          json: JSON.stringify(sample)
        },
        // ここまでテスト用の設定
    
        dataType: 'json',
        success: function(json) {
          var items = json[activityType];
    
          $.each(items, function(i, item) {
            var imgUrl = item.img;
    
            // 多少効率は落ちますが、文字列連結ではなく
            // 要素生成して属性を設定したほうが安全です
            var img = $('<img>').attr('src', imgUrl);
            // もし文字列連結でやるなら、
            // src="..." のダブルクォートを忘れずに。
    
            $('#output1').append(img);
          })
        },
        error: function() {
          console.log('error');
        }
      });
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button data-attr="sports">Load More</button>
    <button data-attr="workshop">Load More</button>
    <button data-attr="culture">Load More</button>
    
    <div id="output1"></div>
[/code]


CC BY-SA 4.0
2015-06-02T14:31:43.217
10908
2019-12-13T18:08:35.503
2019-12-13T18:08:35.503
32986
8000
10894
answer