Search results in XML put into array with jQuery

问题

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

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.

回答1:

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

Hope it helps

来源：https://stackoverflow.com/questions/12145893/search-results-in-xml-put-into-array-with-jquery

标签

jquery

xml

arrays

youtube-api