在循環中使用$ .getJSON

Itry學習一點點JSON和facebook一起玩Graph API。

我想做的事情：我有一個足球隊的名單，以及他們在facebook上的小組ID。團隊被保存在團隊數組和Facebook中的ID。然後我創建一個循環，調用一個包含$.getJSON的函數，並嘗試檢索每個組的喜歡。問題在於它僅打印第一個團隊，然後僅加載瀏覽器窗口而不填充其餘結果。

我有以下代碼：

var team = ['aek','ael','aris','iraklis','kavala']; 
var teamID = ['110422719032276','129322810472059','182829608421864','191854030839850','192175080800352'] 

$(document).ready(function() { 
    for(var i=0; i<5; i++) { 
    retrieveData(team[i],teamID[i]); 
    } 

}); 

function retrieveData(teamName,id) { 
    var baseURL = 'http://graph.facebook.com/'; 
    $.getJSON(baseURL+id+"&callback=?", function(data) { 
     document.write(teamName+" :"+data.likes) 
    }); 

};

來源

2011-03-03 Sotiris

「......它只打印第一隊然後」......然後**什麼**？ – Pointy 2011-03-03 15:30:14

我碰到過這個，並認爲我會分享：http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – orolo 2011-03-03 15:34:33

@orolo感謝您的鏈接:) – Sotiris 2011-03-03 15:39:31

這是不遠處是正確的，但不能用document.write()把你讀入數據到該頁面。相反，如有必要，您將不得不向DOM添加內容。

例如，你可以做這樣的事情：

function retrieveData(teamName,id) { 
    var baseURL = 'http://graph.facebook.com/'; 
    $.getJSON(baseURL+id+"&callback=?", function(data) { 
     $('#teamList').append('<div>' + teamName+" :"+data.likes + '</div>') 
    }); 

};

，如果你有這樣的事情：在頁面上

<div id='teamList'> 
    <!-- teams go here --> 
</div>

。

來源

2011-03-03 15:32:27 Pointy

這是正確的，這是我做的一個快速測試 - http://jsfiddle.net/9kb27/ – 2011-03-03 15:33:58

謝謝，這個作品很棒，我從來沒有想過'document.write（）'是問題。再次感謝 – Sotiris 2011-03-03 15:37:43

Jquery模板非常適合從Json對象構建html，你應該查看https://github.com/jquery/jquery-tmpl 和教程http://www.borismoore.com/2010/09 /introducing-jquery-templates-1-first.html – 2011-03-03 15:56:19

在循環中使用$ .getJSON

回答

相關問題