jQuery JSON parsing on Google+ API and optimizing code

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>

Jonathan de M. · Accepted Answer · 2012-12-24 04:39:35Z

2

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

        });

    });

});

edited Dec 24, 2012 at 4:39

answered Dec 24, 2012 at 3:51

Jonathan de M.

9,8488 gold badges50 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maca Over a year ago

I tried your code but something is repeating it self. jsfiddle.net/tXLTT/1

Collectives™ on Stack Overflow

jQuery JSON parsing on Google+ API and optimizing code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related