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/

score 2 · Accepted Answer · answered Dec 23 '12 at 18:12

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?

is better to keep API key on your server and use sever as proxy to get the data — charlietfl, Dec 23 '12 at 18:18
On jsFiddle the script works great but on my browser(chrome) I get error "Uncaught SyntaxError: Unexpected token ILLEGAL " — Maca, Dec 24 '12 at 02:54
never mind I got it. http://stackoverflow.com/questions/12719859/syntaxerror-unexpected-token-illegal — Maca, Dec 24 '12 at 03:02

jQuery JSON parsing with Google+ API

1 Answers1