jQuery JSON解析Google+ API並優化代碼

Question

我試圖從Google+ API解析配置文件名稱和配置文件圖像。我製作了一個腳本來爲一個配置文件提取數據，但我需要從多個帳戶提取數據。這是我迄今爲止所做的：http://jsfiddle.net/KTbcX/

我想插入配置文件數據到每個.box類，但我做的方式似乎效率低下。我想要做的是讓每個data-id屬性都插入到腳本中。像這樣

<div class="box"> 
    <div class="gplus-data" data-id="113411411661448774142"></div> 
</div> 
<div class="box"> 
    <div class="gplus-data" data-id="100300281975626912157"></div> 
</div> 
<div class="box"> 
    <div class="gplus-data" data-id="104560124403688998123"></div> 
</div> 

<script> 
$(function() { 
    $.getJSON("https://www.googleapis.com/plus/v1/people/ [data-id would go here] ?fields=displayName%2Cimage&key=AIzaSyAQtjGlomf-jLktD8h6je_bHnxYkSDOOyQ", function(data) { 
     $('.gplus-data').append('<tbody class="items"></tbody>'); 
     $('.gplus-data tbody').prepend('<tr><th>Name</th><th>Image</th></tr>');   
      var item = '<td>' + data.displayName + '</td>'; 
      item += '<td><img src="' +data.image.url + '"></td>'; 
      $('.items').append('<tr>' + item + '</tr>'); 
    }); 
}); 
</script> 

Answer 1

試試這個

$(function() { 

    $('.gplus-data').each(function() { 
     var that = this; 
     $.getJSON("https://www.googleapis.com/plus/v1/people/" + $(this).data('id') + "?fields=displayName%2Cimage&key=AIzaSyAQtjGlomf-jLktD8h6je_bHnxYkSDOOyQ", function(data) { 

      $(that).append('<tbody class="items"></tbody>'); 
      $(that).find('tbody').prepend('<tr><th>Name</th><th>Image</th></tr>'); 
      var item = '<td>' + data.displayName + '</td>'; 
      item += '<td><img src="' + data.image.url + '"></td>'; 
      $(that).find('.items').append('<tr>' + item + '</tr>'); 

     }); 

    }); 

});​