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.
- Send a GET request in desired format to the url mention.
- 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 e开发者_JS百科nlist.
<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>
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:
- 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.ajaxis a wrapper.jQuery.getJSONis a wrapper forjQuery.ajaxspecifically intended to retrieve JSON or JSONP-encoded data. - 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.
- The concept of JSONP, or JSON with padding. JSONP is not limited to the same-origin policy as normal AJAX requests are.
- The jQuery javascript framework, an excellent javascript framework for dom manipulation and ajax requests, and pretty much everything else useful.
- The
jQuery.getJSON()method from jQuery, which is used to retrieve json or jsonp data, such as in this example - The
jQuery.each()method from jQuery, which can be used to iterate over any generic collection, in this case, json. - The
.append()method from jQuery, which is used to append 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 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.
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.
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.
加载中,请稍侯......
精彩评论