Utilizing YQL for extracting JSON information from a cross-domain server, how can a table be generated showcasing the acquired data?

After making a cross-domain JSON request using YQL, I received the JSON code enclosed in a table <div> within the html file.

The challenge now is figuring out how to extract this data and display it in a table format.

Below is the JavaScript code snippet:

// JavaScript Document

$(document).ready(function(){
var container = $('#target');
$('.ajaxtrigger').click(function(){
doAjax($(this).attr('href'));
return false;
});
function doAjax(url){

// check if it is an external URI

if(url.match('^http')){

// make a call to YQL
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=xml'&callback=?",

// function to handle the fetched data from JSON-P call

function(data){

// filter and render the data if available

if(data.results[0]){
var filteredData = filterData(data.results[0]);
container.html(filteredData);

// indicate if there was an error loading the page

} else {
var errormsg = "<p>Error: can't load the page.</p>";
container.html(errormsg);
}
}
);

// If not an external URI, utilize Ajax load()

} else {
$('#target').load(url);
}
}

// Function to filter out unwanted elements

function filterData(data){
data = data.replace(/<?\/body[^>]*>/g,'');
data = data.replace(/[\r|\n]+/g,'');
data = data.replace(/<--[\S\s]*?-->/g,'');
data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
data = data.replace(/<script.*\/>/,'');
return data;
}
});

And here is the corresponding HTML code:

<body>
<div id="doc" class="yui-t7">
... (HTML content)
</body>

In attempting to manipulate the retrieved data, the following code section didn't work as expected:

//      $.getJSON(data, function(json){
// decipher the response structure here...      
//        
document.getElementById("placeholder").innerHTML=prova.buy.currency+"  "+prova.sell.currency+" "+prova.offer[0].amount+" "+prova.offer[0].rate+"  "+prova.offer[0].seller.name;

(UPDATE) Following your suggestions, I ran a test using the below:

// TEST

  $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
            "q=select%20*%20from%20html%20where%20url%3D%22"+
            encodeURIComponent(url)+
            "%22&format=json'&callback=?",  

    // handling the data from successful JSON-P call
    function(data){
    document.getElementById('placeholder').value = JSON.stringify(data,null,'  '); 
      // filtering and rendering data if available
      if(data.results[0]){
        var data = filterData(data.results[0]);
        container.html(data);
        alert(data);    
      // indicating errors when accessing the page 
      } else {
        var errormsg = "<p>Error: can't load the page.</p>";
        container.html(errormsg);
      }
    }
  );

However, the code stopped at the alert(data) point without proceeding to the part involving document.getElementById.

I also switched from using a "xml" request to a "json" request...

SECOND UPDATE

Resolved the issue with the 'div id=placeholder' in the HTML table. It seems there were challenges with this div, as changing the 'div id' to 'texture id=placeholder' made it work.

With the entire JSON string in my text area now, I attempted to use the getJson command to extract a specific portion of the data and display it in a table but encountered some difficulties.

I'm unable to comprehend why, despite having a json code, I am facing obstacles in extracting and displaying the required part using the suggested code.

FINAL PARTIAL UPDATE

The issue was identified in the "data" filter where it failed to remove "" tags from the data, resulting in parse.Json(data) being incapable of interpreting the format!

Successfully retrieved the necessary information.

Here's the final .js code snippet:

// 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&format=json'&callback=?",
    // handling the data from successful JSON-P call
    function(data){
      // filter and render the data
        if(data.results[0]){
            **var data = filterData(data.results[0]);**

            container.html(data);
            alert(data);    
            document.getElementById("prova1").value = data; 

            var obj = $.parseJSON(data); 
            alert(obj.sell.currency); 
// END OF TEST

      // indicating errors when accessing the page
      } else {
        var errormsg = "<p>Error: can't load the page.</p>";
        container.html(errormsg);
      }
    }
  );
// if it is not an external URI, use Ajax load()
} else {
  $('#target').load(url);
 }
}

 // filter out unwanted elements
 function filterData(data){
 **data = data.replace(/<body>/,'');** 
 data = data.replace(/<?\/body[^>]*>/g,'');
 data = data.replace(/[\r|\n]+/g,'');
 data = data.replace(/<--[\S\s]*?-->/g,'');
 data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
 data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
 data = data.replace(/<script.*\/>/,'');
 return data;
 }
});
javascriptjsonyql

Answer №1

If you find yourself struggling with data retrieval in XML format, consider switching your query string to format=json. This will provide you with a javascript object that is easier to manipulate.

For those already familiar with jQuery, I suggest exploring the possibilities of the DataTables plug-in.

Take a look at this code snippet showcasing the different data formats obtained from Yahoo. The Yahoo Console can also be a valuable tool during testing.

<html>
 <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  </head>
  <body>
    
    
    <button onclick="json()">GET JSON</button><button onclick="xml()">GET XML</button>
    
    <textarea id="stdout" style="width:100%;height:40em;"></textarea>
    
   <script type="text/javascript">
     
   function json() {  
     var url = 'https://query.yahooapis.com/v1/public/yql?q=show%20tables&format=json&diagnostics=true&callback=?';
     $.getJSON( url, function(data) {
          document.getElementById('stdout').value = JSON.stringify(data,null,'  ');
     });
   }
     
   function xml() {  
     var url = 'https://query.yahooapis.com/v1/public/yql?q=show%20tables&format=xml&diagnostics=true&callback=?';
     $.getJSON( url, function(data) {
           document.getElementById('stdout').value = JSON.stringify(data,null,'  ');
     });
   }
     
   </script>
    
    </body>
  </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The array filtering functionality is not functioning as intended

Struggling with correctly filtering data in JavaScript. Here's an example where var1 = 20, var2 = 10, var3 = 30, var4 = 40. This is the code snippet: var variables = ['var1', 'var2', 'var3', 'var4'], values = [ ...

javascriptarraysnode.jsfilter

Using react to load a base64 string texture in three.js

Currently, I am utilizing a server to generate base64 string representation of charts. These are then loaded into a React component by fetching data via POST request. The data successfully loads into the React state but the scene renders before the textu ...

javascriptreactjsthree.jsrender-to-texture

Whenever I use NextJS's <Link> component, I always end up getting redirected to a

After searching online, I came across this question and tried to implement the suggested solution, but it's still not working for me. Apologies for any duplication. I have a simple link tag that is resulting in a 404 error: <Link className={classe ...

javascriptreactjsroutesreact-routernext.js

I am still receiving an empty dropdown value despite implementing ng-selected

I am having issues with using ng-selected to retrieve the selected value from a dropdown. Instead of displaying the selected value, it appears blank. Here is the code snippet I have tried: <div> <select id="user_org" ng-model="selectedorg.all ...

javascripthtmlangularjs

The Material-ui DatePicker seems to be malfunctioning and as a result, the entire form is not

Struggling to get my DateTimePicker component (could be DatePicker) working after following installation instructions from various sources. I've spent a day and a half attempting to make it functional without success. If you can help me create a separ ...

javascriptreactjsmaterial-uicomponents

Calendars malfunctioning following the execution of npm run build

While utilizing the vue2-datepicker for a calendar, I encountered an issue during development. When clicking on the input box in my form, the calendar appeared as expected above the input. However, after running npm run build and loading up the resulting p ...

javascriptnode.jsvue.jswebpack

Using Firebase Authentication in Next.js with Server-Side Components

As I explore how to implement authentication using Firebase in my Next.js app, one thing that stands out is the need to initialize Firebase with our configuration details (apiKey, etc.). The concern I have is when using any Firebase function from a client ...

javascriptnext.jsfirebase-authenticationnext.js13react-server-components

Send XML information to receive an XML reply

Is there anyone who can provide me with a sample code for supporting the API from pingbid.net? I need to post the required data and retrieve the xml. I have included my code below, can someone please assist me? <?php $url ="https://pingbid.net/leads/a ...

phpjavascriptxmljson

Querying a list of objects with nested pointers using the Parse.com Javascript API

How can I efficiently query my Parse.com backend for a list of objects that contain specific pointers within them? For example, if ObjectA contains a list of pointers to ObjectB, how can I query for all ObjectA's that have ObjectB in their list? I a ...

javascriptparse-platform

how to change visibility with Javascript

As I work on creating a menu using HTML and JavaScript, I've designed it to be a grid layout with 3 rows and 2 columns. The menu contents are also structured in a grid format. When the screen width is reduced, the layout changes to a single row and co ...

javascripthtmlcss

Using props to access methods within a map function

There are two main components in my codebase: App.js and PersonalInfo.js: App.js import React, { Component } from "react"; import "./styles.css"; import PersonalInfo from "./PersonalInfo"; class App extends Component { state = [{ fname: "Jonny", lna ...

javascriptreactjs

What could be causing my AJAX code to malfunction?

This issue should be a simple fix, but I'm completely stumped. I'm working on a test involving an AJAX request and trying to display a variable from a drop-down menu. Unfortunately, the code isn't running at all. Can someone please point ou ...

javascriptphpjqueryajax

Is there a way for me to transfer the value of a variable from one div to another within the same template?

I'm working on fetching data from a model object using a loop. My goal is to pass the same variable i between two separate div elements. I need the same i value because it's crucial for accessing the correct object. As someone new to this field, ...

javascriptjqueryhtmldjangobootstrap-4

Enhancing the functionality of XMLHttpRequest.open()

How can I intercept and modify the arguments of the XMLHttpRequest.open() method? I attempted using the proxy method, but it was unsuccessful. I removed the override when XMLHttpRequest() was called: (function() { var intercepted = window.XMLHttpReque ...

javascriptajaxxmlhttprequestoverriding

What type of response does an Ajax request generate when the browser is abruptly closed during the call?

What occurs to the response if an ajax request is sent, but before the server returns a response, the user closes the browser? I am puzzled as to why I receive it in the error callback, considering that the browser has been closed. ...

javascriptajaxjquery

What are some helpful tools for organizing data from an External API in NodeJS and Express?

One of the tasks I'm currently working on involves connecting to an external API through my backend system. Data flow : External API -> My backend -> Client side Typically, I would use modules such as request or http to facilitate this p ...

javascriptnode.jsapiexpressexternal

Is there a way to skip the current page in an Ajax GET request?

As an example, I am currently viewing the /users page and when I send a request from that location, it directs me to /users/conversations/id instead of just conversations/id. How can this be adjusted? users.js $('.start-conversation').click(fun ...

javascriptjqueryruby-on-railsajax

Increase the counter variable value by 1 when resizing the browser window

Every time I resize the browser window using (CTRL+SHFT+M) or change the window orientation, the value of the counter_ variable increases by 4 or 7 instead of 1. Here is the HTML code: <div id="my_element"> <span id="text">0</span> ...

javascriptjquery

How come every time I click on a different lightbox link, it always shows the same content

I'm currently facing an issue where different contents are supposed to be displayed in different lightbox links, but instead, when I click on any link, only the last content appears in all other lightboxes. It seems like there is some overlapping happ ...

javascriptjqueryhtmlcsslightbox

Remove any null or blank values from a JSON field within a MYSQL array

Within a table, there is a JSON field where arrays containing data are stored. For instance: ["a", "", "c"] ["", "", ""] ["a", "b", "c"] The task is to remove empty values from this field and obtain: ["a", "c"] null ["a", "b", "c"] Afterward, update ...

mysqlsqljson