attrによって読み込むajaxを振り分けたい

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

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

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

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