How to Get and display the list of youtube videos using javascript

Question

I have written a C code for getting the list of youtube videos for the url \"*http://gdata.youtube.com/feeds/api/standardfeeds/top_rated*\" using the libsoup library. I can

Answer 1

Well, I've whipped something basic up using jQuery, a javascript framework, that makes a GET request to that url, and retrieves the data in jsonp format. Then parses some basic info (title and link) about each entry out and appends it to an unordered list within a div with id of data, as long as the bits of data are not undefined for that entry. This works if you stick it in a script tag with jQuery loaded on the page and run it. I'm not going to go into all the details of how this works, because you said you'd be willing to put in some effort. But I'll get you started with some links and basic explanations.

This example utilizes:

1. The concept of AJAX, or Asynchronous Javascript and XML. A group of technologies used to create interactive web applications. In our example, specifically XMLHttpRequest, for which jQuery's jQuery.ajax is a wrapper. jQuery.getJSON is a wrapper for jQuery.ajax specifically intended to retrieve JSON or JSONP-encoded data.
2. The concept of JSON, or Javascript Object Notation, a lightweight data-interchange format. You can think of it as a fat-free alternative to XML.
3. The concept of JSONP, or JSON with padding. JSONP is not limited to the same-origin policy as normal AJAX requests are.
4. The jQuery javascript framework, an excellent javascript framework for dom manipulation and ajax requests, and pretty much everything else useful.
5. The jQuery.getJSON() method from jQuery, which is used to retrieve json or jsonp data, such as in this example
6. The jQuery.each() method from jQuery, which can be used to iterate over any generic collection, in this case, json.
7. The .append() method from jQuery, which is used to append content to dom elements.
8. The concept of jQuery Selectors, which are really just css selectors with a few extra bells and whistles. jQuery uses selectors to quickly "select" dom elements for operation upon them.

Without further adieu:

The Example

---

     $("body").append("<div id = 'data'><ul></ul></div>");
     $.getJSON("http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=?&alt=jsonc&v=2", function(data) {
        var dataContainer = $("#data ul");
        $.each(data.data.items, function(i, val) {
            if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') {
                dataContainer.append("<li><a href = "+val.player.default+" target = '_blank'>"+val.title+"</a></li>");
        }
        });
    });

That should be enough to get you "pointed in the right direction." If you have any questions, make a comment and I'll do my best to answer them.

Answer 2

Yes, you can ^^

The youtube-API also provides jsonp, which returns the data as a JS-command.
Watch this(and see the parameters inside the URL):
http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?alt=json&callback=someFunction

With jsonp you don't have any sameOriginPolicies-restrictions, while it not works with AJAX.

It would be easy using a library like jQuery.

If you don't want to use jQuery or anything like this, you have to inject a <script>-element to the DOM with the URL as src-attribute, and create a function (using the above URL has to be named "someFunction") that works with the data.

Answer 3

The YouTube API supports JSONP (JavaScript Object Notation w/ Padding). JSONP allows you to make external site requests to gain data. But you don't really need to know all that. The basic idea is you inject a script tag with a request as the src attribute.

But nowadays, you don't really need to do that either unless you want to learn hard-core Javascript. The code is all written for you in brilliant Javascript Libraries. I recommend that you use jQuery to make the JSONP request. jQuery is a simple library that can be used by adding a single line of code to your HTML document.

Once you get jQuery up and running, you can use the getJSON command to parse the JSONP data. At that point, you will get an object with all of the data you need, and you can choose how you want to output the data.