title: Using YQL to get JSON data from cross-domain server, how to create a table with retrieved data
body: <p>I did a cross-domain JSON request with YQL and it returns me the JSON code in a table <code>&lt;div&gt;</code> in the html file.</p>
  
  <p>Now my problem is that I don't know to get this data and put it in a table.</p>
  
  <p>This is the code (in JS file):</p>
  
  <pre><code>// JavaScript Document
  
  $(document).ready(function(){
  var container = $('#target');
  $('.ajaxtrigger').click(function(){
  doAjax($(this).attr('href'));
  return false;
  });
  function doAjax(url){
  
  // if it is an external URI
  
  if(url.match('^http')){
  
  // call YQL
  $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
  "q=select%20*%20from%20html%20where%20url%3D%22"+
  encodeURIComponent(url)+
  "%22&amp;format=xml'&amp;callback=?",
  
  // this function gets the data from the successful 
  // JSON-P call
  
  function(data){
  
  // if there is data, filter it and render it out
  
  if(data.results[0]){
  var data = filterData(data.results[0]);
  container.html(data);
  
  // otherwise tell the world that something went wrong
  
  } else {
  var errormsg = "&lt;p&gt;Error: can't load the page.&lt;/p&gt;";
  container.html(errormsg);
  }
  }
  );
  
  // if it is not an external URI, use Ajax load()
  
  } else {
  $('#target').load(url);
  }
  }
  
  // filter out some nasties
  
  function filterData(data){
  data = data.replace(/&lt;?\/body[^&gt;]*&gt;/g,'');
  data = data.replace(/[\r|\n]+/g,'');
  data = data.replace(/&lt;--[\S\s]*?--&gt;/g,'');
  data = data.replace(/&lt;noscript[^&gt;]*&gt;[\S\s]*?&lt;\/noscript&gt;/g,'');
  data = data.replace(/&lt;script[^&gt;]*&gt;[\S\s]*?&lt;\/script&gt;/g,'');
  data = data.replace(/&lt;script.*\/&gt;/,'');
  return data;
  }
  });
  </code></pre>
  
  <p>and here is the html code:        </p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="doc" class="yui-t7"&gt;
  &lt;div id="hd" role="banner"&gt;
  &lt;h1&gt;
  Ajax with jQuery - using YQL
  &lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="bd" role="main"&gt;
  &lt;h2&gt;
  Demo
  &lt;/h2&gt;
  &lt;ul&gt;
  &lt;li&gt;
  &lt;a class="ajaxtrigger" href="ajaxcontent.html"&gt;
  Load Ajax Content
  &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a class="ajaxtrigger" href="linkpage"&gt; 
  Get cspro.json
  &lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="target"&gt;
  &lt;!--    &lt;script&gt;window.alert(container)&lt;/script&gt; --&gt;
  &lt;/div&gt;
  &lt;h2&gt;
  Formatted List
  &lt;/h2&gt;
  &lt;/div&gt;
  &lt;div id="placeholder"&gt;&lt;/div&gt;
  &lt;!--  &lt;script&gt; document.getElementById("placeholder").innerHTML =     container.html(data);
  &lt;/script&gt; --&gt;
  &lt;h2&gt;
  TEST
  &lt;/h2&gt;
  &lt;/div&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.pack.js"&gt;&lt;/script&gt;
  &lt;script src="code.js"&gt;&lt;/script&gt;
  &lt;script src="using-yql3.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I've try with:</p>
  
  <pre><code>//      $.getJSON(data, function(json){
  // figure out the format of the answer here...      
  //        
  document.getElementById("placeholder").innerHTML=prova.buy.currency+"  "+prova.sell.currency+" "+prova.offer[0].amount+" "+prova.offer[0].rate+"  "+prova.offer[0].seller.name;  
  </code></pre>
  
  <p>but it didn't work.</p>
  
  <p><strong><em>(UPDATE) after your indications, I've tested this:</em></strong></p>
  
  <pre><code>// TEST
  
    $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
              "q=select%20*%20from%20html%20where%20url%3D%22"+
              encodeURIComponent(url)+
              "%22&amp;format=json'&amp;callback=?",  // QUESTO è URL cui segue la "," e poi function(data)
  
      // this function gets the data from the successful 
      // JSON-P call
      function(data){
      document.getElementById('placeholder').value = JSON.stringify(data,null,'  '); //MIO
        // if there is data, filter it and render it out
        if(data.results[0]){
          var data = filterData(data.results[0]);
          container.html(data);
          alert(data);    //MIO TEST
        // otherwise tell the world that something went wrong
        } else {
          var errormsg = "&lt;p&gt;Error: can't load the page.&lt;/p&gt;";
          container.html(errormsg);
        }
      }
    );
  </code></pre>
  
  <p>but it works up to alert(data) simply "jumping" the part of the code related to document.getElementById.</p>
  
  <p>I've also changed the "xml" request into "json" request...</p>
  
  <p><strong><em>SECOND UPDATE</em></strong></p>
  
  <p>I've solved the problem with the "div id=placeholder" in the html table. Seems it has some problems with this div, considering that changing the "div id" with a "texture id=placeholder" it works.</p>
  
  <p>So, now I have the whole json string in my text area.
  I've tried the getJson command to recover a parte of the data and get it in a table, but again I've having some problems.</p>
  
  <p>I can't understand with the code you suggested to me, I have a json code, why I can't extract it and show the part i need?</p>
  
  <p><strong><em>FINAL PARTIAL UPDATE</em></strong></p>
  
  <p>The problem was that the "data" filter wasn't eliminating "" tag from data, so that the parse.Json(data) was unable to read the format!</p>
  
  <p>Right know I retrieve the information I need.</p>
  
  <p>Here's the final .js code:</p>
  
  <pre><code>// JavaScript Document
  $(document).ready(function(){
  var container = $('#target');
  $('.ajaxtrigger').click(function(){
  doAjax($(this).attr('href'));
  return false;
  });
  function doAjax(url){
  // if it is an external URI
  if(url.match('^http')){
  // call YQL
  
  // TEST
  
  $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
              "q=select%20*%20from%20html%20where%20url%3D%22"+
              encodeURIComponent(url)+
              "%22&amp;format=json'&amp;callback=?",
      // this function gets the data from the successful 
      // JSON-P call
      function(data){
        // if there is data, filter it and render it out
          if(data.results[0]){
              **var data = filterData(data.results[0]);**
  
              container.html(data);
              alert(data);    // TEST VERIFY (after FILTER before data extraction)
              document.getElementById("prova1").value = data; // TEST full data return in a textarea
  
              var obj = $.parseJSON(data); // JSON elements retrieve
              alert(obj.sell.currency); // TEST for element retrieve
  // TEST END
  
        // otherwise tell the world that something went wrong
        } else {
          var errormsg = "&lt;p&gt;Error: can't load the page.&lt;/p&gt;";
          container.html(errormsg);
        }
      }
    );
  // if it is not an external URI, use Ajax load()
  } else {
    $('#target').load(url);
   }
  }
  
   // filter out some nasties
   function filterData(data){
   **data = data.replace(/&lt;body&gt;/,'');** // INTERTED THIS ONE TO REMOVE body tag
   data = data.replace(/&lt;?\/body[^&gt;]*&gt;/g,'');
   data = data.replace(/[\r|\n]+/g,'');
   data = data.replace(/&lt;--[\S\s]*?--&gt;/g,'');
   data = data.replace(/&lt;noscript[^&gt;]*&gt;[\S\s]*?&lt;\/noscript&gt;/g,'');
   data = data.replace(/&lt;script[^&gt;]*&gt;[\S\s]*?&lt;\/script&gt;/g,'');
   data = data.replace(/&lt;script.*\/&gt;/,'');
   return data;
   }
  });
  </code></pre>