Question

I am trying to parse profile name and profile image from Google+ API. I made one script that pulls data for one profile but I need to pull data from multiple account. Here is what I have done so far: http://jsfiddle.net/KTbcX/

I want to insert profile data to each .box class but way I am doing it seems inefficient. What I would like to do is have each each data-id attribute would insert itself into the script. Like so

<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

Try this

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

        });

    });

});​