jQuery JSON parsing with Google+ API

Question

I am trying to parse data from Google plus API. I want to display user profile name and profile image. Here is what I have so far:

<div class="gplus-data"></div>
<script> 
    $(document).ready(function() {
        $(function () { 
            $.getJSON( "https://www.googleapis.com/plus/v1/people/113411411661448774142?fields=displayName%2Cimage&key=AIzaSyC_f6bGDJ54pkibdZ1hfiQo3-ekJs_btr8",
                    function (data) {   
                $('.gplus-data').append('<tbody class="items"></tbody>');
                $('.gplus-data tbody').prepend('<tr><th>Name</th><th>Image</th></tr>'); 
                $.each(data.items, function(i,item){    
                    var item = '<td>' + item.displayName + '</td>'; 
                    item += '<td>' + item.image.url + '</td>';
                    $('.items').append('<tr>' + item + '</tr>');    
                });
            });
        });
    });
</script>

http://jsfiddle.net/yrrqd/1/

Answer 1

Several issues, first the simple ones is you are trying to add table components to a DIV.

$(function () {}) is the same as $(document).ready(function() {}) so it doesn't make sense to wrap one in the other

Next is the data is not in the format you are trying to parse. Your code is assuming the response is an array, however the url provided returns an object.

This will work if you change DIV to table:

$(function() {
    $.getJSON(url, 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>'); 
    });    
});

DEMO: http://jsfiddle.net/NsfPH/

Do you really want your API key exposed?