使用jQuery將XML中的搜索結果放入數組中

Question

我之前問過另一個問題，並試圖獲得有關從YouTube搜索查詢中獲取XML文件的一些代碼的幫助。然後，使用jQuery，從XML文件（視頻ID）獲取所需的信息並將其放入JavaScript變量。

這工作得很好，但我想（如果可能的話）我們的網站沒有1但3個來自此頻道的最新視頻。我被建議改變搜索得到3結果，而不是一個，並將jQuery .find（）結果放入一個數組中。

問題是，我認爲（我真的應該說，我敢肯定）我做了這個錯誤......看看：

<!-- enable jQuery --> 
<script type="application/javascript" src="jquery.js"> </script> 

<!-- video loading functions --> 
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    jQuery.ajax('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=3&v=2',{ 
     dataType:'xml', 
     success: function(data,status, xhr) { 
     var $data =$(data); 
     var videoTag = new array ($data.find('videoid')); 
     var videoId1 = videoTag[0].text(); 
     var videoId2 = videoTag[1].text(); 
     var videoId3 = videoTag[2].text(); 
    } 
    });  
    // YouTube Video embed command 
    function embedYT1(id, loaction) { 
    jQuery(location).append("<object width=\"1000\" height=\"563\"><param name=\"movie\" value=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\" type=\"application/x-shockwave-flash\" width=\"1000\" height=\"563\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>") 
    } 

    // Call video embed function for 3 vids 
    embedYT(videoId1, '#vid1'); 
    embedYT(videoId2, '#vid2'); 
    embedYT(videoId3, '#vid2'); 
}); 
</script> 

誰能幫助？

您可能還會注意到，我有一個embedYT功能，用於嵌入3個視頻。我做對了嗎？ （我有三個id='vid#'在我的標籤爲我的表。

Answer 1

好了，有一些事情錯在這裏。不要難過了。你學的是平時犯錯誤:)

首先所有的變量videoId1,videoId2和videoId3都是聲明函數的本地函數，所以在調用embedYT(videoId1)及其後的函數時它們將不可見。

其次，即使在調用embedYT函數時，全局變量（儘量不要在Javascript中聲明全局變量，請確保）您在成功回調中設置的值。這些函數在頁面加載後立即執行，這可能發生在執行AJAX回調之前。爲了解決這個問題，我們需要將embedYT調用移至回調

第三，$.fn.find()返回一個jQuery集合（類似於數組），所以不需要將結果放入其他數組中。另外，查看youtube API的響應，您應該找到的標籤是'yt：videoid'，而不是'videoid'（其名稱空間）。 In this page我發現了正確的語法來做到這一點與jQuery。讓我們來解決這兩個東西：

var videoTag = $data.find('yt\\:videoid'); 

隨着那固定的，我們可以用$.fn.each回調內部遍歷集合並調用embedYT每個元素，固定第二個問題：

... 
success: function(data,status, xhr) { 
    var $data =$(data); 
    var videoTag = $data.find('yt\\:videoid'); 

    videoTag.each(function(i) { 
    embedYT($(this).text(), '#vid' + i); 
    }); 

} 
...  

迭代的集合比訪問每個元素更多的未來證明。如果您必須更改視頻量，則可能無需在JavaScript中進行任何更改。

所以最終代碼看起來應該是這樣

<!-- enable jQuery -->] 
<script type="application/javascript" src="jquery.js"> </script> 

<!-- video loading functions --> 
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    jQuery.ajax('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=3&v=2',{ 
     dataType:'xml', 
     success: function(data,status, xhr) { 
     var $data =$(data); 
     var videoTag = $data.find('yt\\:videoid'); 

     videoTag.each(function(i) { 
      embedYT($(this).text(), '#vid' + i); 
     }); 

     } 
    });  

    // YouTube Video embed command 
    function embedYT(id, loaction) { 
     jQuery(location).append("<object width=\"1000\" height=\"563\"><param name=\"movie\" value=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\" type=\"application/x-shockwave-flash\" width=\"1000\" height=\"563\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>") 
    } 

    }); 
</script> 

希望它可以幫助