使用 Google+ API 进行 jQuery JSON 解析

Question

我正在尝试解析来自 Google plus API 的数据。我想显示用户个人资料名称和个人资料图像。这是我到目前为止所拥有的:

<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

有几个问题，首先是简单的问题是您正在尝试将表格组件添加到 DIV。

$(function () {}) 与 $(document).ready(function() {}) 相同，因此没有意义将一个包裹在另一个中

接下来是数据不是您尝试解析的格式。您的代码假设响应是一个数组，但提供的 url 返回一个对象。

如果将 DIV 更改为 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>'); 
    });    
});

演示:http://jsfiddle.net/NsfPH/

您真的希望公开您的 API key 吗？