Home/ Questions/Q 3420962
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T06:03:44+00:00

I have written a C code for getting the list of youtube videos for

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0