Geek Answers Handbook

How to get and display a list of YouTube videos using javascript

I wrote C code to get a 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 with libxml2 and extract the required fields from it.

I want to know how I can do the same with javascript and display a list in a browser. I have very basic javascript knowledge, but Iā€™m ready to make the necessary effort if you guys point me in the right direction.

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

  • Send the GET request in the desired format to the URL link.
  • The answer will be xml or json-c format and this should be parsed

How can I achieve both of them with javascript and display with html / javascript? Sample code or any links will be very helpful.

Edit: adding a php tag for better visibility of the question, and I think php can provide hints for the question.

TIA

Pravein S

EDIT by trying the suggestions below:

How do I debug this? It does not seem to display the name of the video that I intend to credit.

<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>
+4
source share
3 answers

Well, I hacked something basic using jQuery, a javascript framework that makes a GET request to this url and retrieves data in jsonp format. Then it analyzes some basic information (header and link) about each output and adds it to the unordered list in the div with the data identifier, if the data bits are not undefined for this record. This works if you put it in a script tag loaded on a jQuery page and run it. I will not go into details about how this works, because you said that you were ready to make some efforts. But I will start with some links and basic explanations.

This example uses:

  • AJAX concept or asynchronous Javascript and XML. A group of technologies used to create interactive web applications. In our example, in particular, XMLHttpRequest , for which jQuery jQuery.ajax is a wrapper. jQuery.getJSON is a wrapper for jQuery.ajax specifically designed to extract JSON or JSONP data.
  • The concept of JSON or Javascript Object Notation is a lightweight data exchange format. You can think of it as a lifeless alternative to XML.
  • The concept of JSONP or JSON with the addition. JSONP is not limited to policies of the same origin as regular AJAX requests.
  • jQuery javascript framework , a great javascript framework for manipulating dom and ajax requests, and much more useful.
  • jQuery.getJSON() from jQuery, which is used to extract json or jsonp data, for example, in this example
  • jQuery.each() method from jQuery that can be used to iterate over any shared collection, in this case json.
  • .append() method from jQuery, which is used to add content to dom elements.
  • 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 to work with them.

Without further adieu:

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 for you to "point in the right direction." If you have any questions, make a comment and I will do my best to answer them.

+4
source

Yes you can ^^

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

With jsonp, you do not have any ORIGINPolicies restrictions, while it does not work with AJAX.

It would be easy to use the jQuery library.

If you do not want to use jQuery or something like this, you need to enter the <script> element in the DOM with the URL as the src attribute and create a function (using the above URL should be named "someFunction"), which works with data.

+2
source

The YouTube API supports JSONP (JavaScript Object Notation w / Padding). JSONP allows you to make external requests to the site to receive data. But you do not need to know all this. The basic idea is that you enter a script tag with the request as an src attribute.

But for now, you really don't need to do this if you don't want to learn hard Javascript. The code is written for you in vibrant Javascript libraries. I recommend you use jQuery to execute a JSONP request. jQuery is a simple library that you can use by adding one line of code to your HTML document.

Once you run jQuery and run the command, you can use the getJSON command to parse the JSONP data. At this point, you will receive an object with all the necessary data, and you can choose how you want to display the data.

+1
source

More articles:


All Articles