title: How to Get and display the list of youtube videos using javascript
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I understand the following from the google help documentation for youtube APIs.</p>
  
  <ol>
  <li>Send a GET request in desired format to the url mention.</li>
  <li>Response will be xml or json-c format and this has to be parsed</li>
  </ol>
  
  <p>How do i achieve both of these using javascript and display using html/javascript? Sample code or any links will be of great help.</p>
  
  <p>Edit : Adding php tag for better visibility of the question and i think php may be able to provide hints for the question.</p>
  
  <p>TIA,</p>
  
  <p>Praveen S</p>
  
  <p>EDIT after trying the suggestions given below:</p>
  
  <p>How do i debug this?
  It doesnt seem to display the title of the videos which i intend to enlist. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
    $("button").click(function(){
      $("body").append("&lt;div id = 'data'&gt;&lt;ul&gt;jffnfjnkj&lt;/ul&gt;&lt;/div&gt;");
      $.getJSON("http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=function&amp;alt=jsonc&amp;v=2", function(data) {
          var dataContainer = $("#data ul");
          $.each(data.data.items, function(i, val) {
           $("body").append("&lt;div id = 'data'&gt;&lt;ul&gt;jffnfjnkj&lt;/ul&gt;&lt;/div&gt;");
  if (typeof(val.player) !== 'undefined' &amp;&amp; typeof(val.title) !== 'undefined') {
  dataContainer.append("&lt;li&gt;&lt;a href = "+val.player.default+" target = '_blank'&gt;"+val.title+"&lt;/a&gt;&lt;/li&gt;");
          }
          });
          });
  
  
    });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;h2&gt;Header&lt;/h2&gt;
  &lt;p&gt;Paragrapgh&lt;/p&gt;
  &lt;p&gt;Paragraph.&lt;/p&gt;
  &lt;button&gt;Click me&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>