使用jQuery将XML搜索结果放入数组 [英] Search results in XML put into array with jQuery
问题描述
我早些时候问了另一个问题，并设法获得了一些代码的帮助，这些代码将从YouTube搜索查询中提取XML文件.然后，使用jQuery从XML文件(视频ID)中获取所需的信息，并将其放入javascript变量中.
这很好，但我希望(如果可能的话)让我们的网站拥有该频道的最新视频中不是1个而是3个.建议我将搜索更改为3个结果，而不是1个，然后将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&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&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#'.
好的，这里有些错误.不要为此感到难过.您正在学习，通常会犯错误:)
首先，变量videoId1，videoId2和videoId3对于声明了的函数而言是本地的，因此在调用embedYT(videoId1)及更高版本时，它们将不可见.
第二，即使调用了embedYT函数时，全局变量(实际上，请不要尝试在Javascript中声明全局变量)也可以在成功回调中设置的值可见.该函数在页面加载后立即执行，这很可能在执行AJAX回调之前发生.要解决此问题，我们需要将embedYT调用移至回调
第三， $ .fn.find()返回jQuery集合(类似于数组) )，因此无需将结果放入其他数组中.另外，请查看在此页面，我找到了正确的语法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&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&hl=en_US\" type=\"application/x-shockwave-flash\" width=\"1000\" height=\"563\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>")
}
});
</script>
希望有帮助
I asked another question earlier and managed to get help with some code that would take an XML file from a YouTube search query. Then, using jQuery, get the information needed from the XML file (the video ID) and put it into a javascript variable.
This worked fine, but I would like (if possible) for our site to have not 1 but 3 of the latest videos from this channel. I was suggested to change the search to get 3 results instead of one, and put the jQuery .find() results into an array.
Problem is I think (I should really say I'm sure) I've done this wrong... Take a look:
<!-- 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&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&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>
Can anyone help?
You may also notice I have a embedYT function which is designed to embed the 3 videos. Have I done this right? (I have three id='vid#' in my tags for my table.
Ok, there are some things wrong here. Don't feel bad about it. You are learning and is usual to make mistakes :)
First of all, the vars videoId1, videoId2 and videoId3 are local to the function where the are declared, so they won't be visible when you call embedYT(videoId1) and the later ones.
Second, even if the variables where global (try to not declare global variables in Javascript, really, please) the values you set in the success callback aint visible when you call the embedYT functions. The functions are executed as soon as the page loads, which probably happens before the AJAX callback is executed. To fix this we need to move the embedYT calling to the callback
Third, $.fn.find() returns a jQuery collection (something similar to an array), so there is no need for puting the result into other array. Also, looking at the response from the youtube API, the tag you should find is 'yt:videoid', not 'videoid' (its namespaced). In this page I've found the correct syntax to do that with jQuery. Let's fix these two things:
var videoTag = $data.find('yt\\:videoid');
With that fixed, we can iterate the collection using $.fn.each inside the callback and call embedYT for each element, fixing the second problem:
...
success: function(data,status, xhr ) {
var $data =$(data);
var videoTag = $data.find('yt\\:videoid');
videoTag.each(function(i) {
embedYT($(this).text(), '#vid' + i);
});
}
...
Iterating a collection is more future proof than accessing each element. If you have to change the amount of videos will probably work without changes in the javascript.
So the final code should look like this
<!-- 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&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&hl=en_US\" type=\"application/x-shockwave-flash\" width=\"1000\" height=\"563\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>")
}
});
</script>
Hope it helps
这篇关于使用jQuery将XML搜索结果放入数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
