2

GoogleplusAPIからのデータを解析しようとしています。ユーザープロフィール名とプロフィール画像を表示したい。これが私がこれまでに持っているものです：

<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/

4

1 に答える 1

2

いくつかの問題、最初の単純な問題は、テーブルコンポーネントをに追加しようとしていること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キーを公開したいですか？

于 2012-12-23T18:12:32.537 に答える