CODEWITHSUNDEEP
phpjavascripthtmljsonhttp
Praveen S
Praveen S

Reputation: 10393

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

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 parse the returned xml data using libxml2 and extract the desired fields from it.

I want to know how can i do the same using javascript and display the list on a browser. I have very basic knowledge on javascript but i am willing to put in the needed effort if you guys point me in the right direction.

I understand the following from the google help documentation for youtube APIs.

  1. Send a GET request in desired format to the url mention.
  2. Response will be xml or json-c format and this has to be parsed

How do i achieve both of these using javascript and display using html/javascript? Sample code or any links will be of great help.

Edit : Adding php tag for better visibility of the question and i think php may be able to provide hints for the question.

TIA,

Praveen S

EDIT after trying the suggestions given below:

How do i debug this? It doesnt seem to display the title of the videos which i intend to enlist. 

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


  });
});
</script>
</head>

<body>
<h2>Header</h2>
<p>Paragrapgh</p>
<p>Paragraph.</p>
<button>Click me</button>
</body>
</html>

Upvotes: 4

Views: 4169

Answers (3)

Alex
Alex

Reputation: 65952

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.

Upvotes: 4

Kranu
Kranu

Reputation: 2567

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.

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117334

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.

Upvotes: 2

Related Questions