使用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>'); 
    });  
}); 

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

你真的想你的API密鑰暴露？