A simple guide to fetching JSON data and storing it in a variable, then parsing it and displaying it

Question

A simple guide to fetching JSON data and storing it in a variable, then parsing it and displaying it

I am looking to retrieve JSON data from the Yahoo Finance API, store it in a JavaScript variable, extract specific information such as "name" and "price", and then display it in an HTML table.

The JSON data can be accessed via the following link:

Currently, I am unsure about how to load the data into a variable, but once I figure that out, my goal is to parse the relevant information and showcase it in an organized manner on a web page.

javascript json parsing variables

Answer 1

Answer №1

Using only JavaScript:

If you try to access the WebService URL using XMLHttpRequest, you may encounter CORS issues:

XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

However, there is a workaround using the service.

In this case, you would request: "". This can be easily implemented in JavaScript without the need for jQuery.

A demonstration has been prepared showcasing how to achieve this:

This demonstrates:

(function() {
  var newXHR;

  // Function to make XMLHttpRequest calls without relying on jQuery or AngularJS $http service.
  function sendXHR(options) {
    //       (Modern browsers)    OR (Internet Explorer 5 or 6).
    newXHR = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    if (options.sendJSON === true) {
      options.contentType = "application/json; charset=utf-8";
      options.data = JSON.stringify(options.data);
    } else {
      options.contentType = "application/x-www-form-urlencoded";
    }
    newXHR.open(options.type, options.url, options.async || true);
    newXHR.setRequestHeader("Content-Type", options.contentType);
    newXHR.send((options.type == "POST") ? options.data : null);
    newXHR.onreadystatechange = options.callback; 
    return newXHR;
  }

  // Making a call to the WebService utilizing the helper function.
  sendXHR({
    type: "GET",
    url: "https://crossorigin.me/http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail",
    callback: function() {
      if (newXHR.readyState === 4 && newXHR.status === 200) {
        var data = JSON.parse(newXHR.response);

        var table = document.getElementById("table");

        var html = "<table><thead>";
        html += "<th>Name</th><th>Price</th>";
        html += "</thead>";
        html += "<tbody>";
        for (i = 0; i < data.list.resources.length; i++) {
          html += "<tr><td>" + data.list.resources[i].resource.fields.name + "</td><td>" + data.list.resources[i].resource.fields.price + "</td></tr>";
        }
        html += "</tbody></table>";
        table.innerHTML = html;
      }
    }
  });
})();

#table table {
  border: solid 1px #CCCCCC;
  border-collapse: collapse;
}
#table table td {
  border: solid 1px #CCCCCC;
  padding: 5px;
}

<div id="table"></div>

For a shorter version of this solution, view the following link:

https://jsfiddle.net/dannyjhonston/9okhpebk/

Answer 2

Using only JavaScript:

If you try to access the WebService URL using XMLHttpRequest, you may encounter CORS issues:

XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

However, there is a workaround using the service.

In this case, you would request: "". This can be easily implemented in JavaScript without the need for jQuery.

A demonstration has been prepared showcasing how to achieve this:

This demonstrates:

(function() {
  var newXHR;

  // Function to make XMLHttpRequest calls without relying on jQuery or AngularJS $http service.
  function sendXHR(options) {
    //       (Modern browsers)    OR (Internet Explorer 5 or 6).
    newXHR = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    if (options.sendJSON === true) {
      options.contentType = "application/json; charset=utf-8";
      options.data = JSON.stringify(options.data);
    } else {
      options.contentType = "application/x-www-form-urlencoded";
    }
    newXHR.open(options.type, options.url, options.async || true);
    newXHR.setRequestHeader("Content-Type", options.contentType);
    newXHR.send((options.type == "POST") ? options.data : null);
    newXHR.onreadystatechange = options.callback; 
    return newXHR;
  }

  // Making a call to the WebService utilizing the helper function.
  sendXHR({
    type: "GET",
    url: "https://crossorigin.me/http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail",
    callback: function() {
      if (newXHR.readyState === 4 && newXHR.status === 200) {
        var data = JSON.parse(newXHR.response);

        var table = document.getElementById("table");

        var html = "<table><thead>";
        html += "<th>Name</th><th>Price</th>";
        html += "</thead>";
        html += "<tbody>";
        for (i = 0; i < data.list.resources.length; i++) {
          html += "<tr><td>" + data.list.resources[i].resource.fields.name + "</td><td>" + data.list.resources[i].resource.fields.price + "</td></tr>";
        }
        html += "</tbody></table>";
        table.innerHTML = html;
      }
    }
  });
})();

#table table {
  border: solid 1px #CCCCCC;
  border-collapse: collapse;
}
#table table td {
  border: solid 1px #CCCCCC;
  padding: 5px;
}

<div id="table"></div>

For a shorter version of this solution, view the following link:

https://jsfiddle.net/dannyjhonston/9okhpebk/

Answer 3

Answer №2

To properly process JSON in javascript, you can utilize the JSON.parse(strinfied_json) method.

After parsing, the JSON is converted into a standard javascript object that can be accessed using either the [] or . syntax.

Check out this illustration:

var data = "{
  person: {
    name: \"John Doe\",
    age: 30,
    city: \"New York\"
  }
}"

var parsedData = JSON.parse(data)

// Accessing properties of the object
var name = parsedData["person"]["name"];
var age = parsedData["person"]["age"];

$('#name_display').text(name);
$('#age_display').text(age);

Answer 4

To properly process JSON in javascript, you can utilize the JSON.parse(strinfied_json) method.

After parsing, the JSON is converted into a standard javascript object that can be accessed using either the [] or . syntax.

Check out this illustration:

var data = "{
  person: {
    name: \"John Doe\",
    age: 30,
    city: \"New York\"
  }
}"

var parsedData = JSON.parse(data)

// Accessing properties of the object
var name = parsedData["person"]["name"];
var age = parsedData["person"]["age"];

$('#name_display').text(name);
$('#age_display').text(age);

Answer 5

Answer №3

If you need to fetch JSON data from a URL and store it in a JavaScript variable, you can utilize the jQuery getJSON method. This method allows you to load JSON data from a specified URL. In the example below, the function displayHtml is used to handle the retrieved data:

var jqxhr = $.getJSON( "http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail", displayHtml)
      .fail(function() {
        alert("Failed to retrieve data from:  http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail")
      });

Answer 6

If you need to fetch JSON data from a URL and store it in a JavaScript variable, you can utilize the jQuery getJSON method. This method allows you to load JSON data from a specified URL. In the example below, the function displayHtml is used to handle the retrieved data:

var jqxhr = $.getJSON( "http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail", displayHtml)
      .fail(function() {
        alert("Failed to retrieve data from:  http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail")
      });

Answer 7

Answer №4

Thank you for your response. I am having trouble implementing your example with the code provided below. The initial alert is triggered, but nothing seems to work after the .getjson function. I assume that once it is functioning properly, the URL will be loaded into displayHTML for parsing?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
alert("initiating");
var jqxhr = $.getJSON( "http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail", displayHtml)
  .fail(function() {
    alert("no response from:  http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail")
  });

alert("completed");

</script>
</body>
</html>

Answer 8

Thank you for your response. I am having trouble implementing your example with the code provided below. The initial alert is triggered, but nothing seems to work after the .getjson function. I assume that once it is functioning properly, the URL will be loaded into displayHTML for parsing?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
alert("initiating");
var jqxhr = $.getJSON( "http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail", displayHtml)
  .fail(function() {
    alert("no response from:  http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail")
  });

alert("completed");

</script>
</body>
</html>

A simple guide to fetching JSON data and storing it in a variable, then parsing it and displaying it

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

ReactJS incorporates multiple CSS files

What is the best way to send a parameter to a mousewheel event?

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)

Tips on manually refreshing AngularJS view using ControllerAs syntax?

Retrieve the specific day of the previous complete week within a designated month using JavaScript

Utilizing AngularJS to implement checkbox selection within a table

Choosing a nested object within a JavaScript object

Testing inherit from a parent class in a unit test for Angular 2

Is it commonplace for redux to generate an abundance of storage?

Avoid including newline characters in the string returned from a curl response

The absence of the dark class in the body is still allowing the impactful influence of Tailwind

Extracting data from a webpage's dynamic table using Python with Selenium and

Shifting Angular Component Declarations to a New Location

Ascending with Progress Indicator Slider

Display all the names of the files from various file inputs in a unified notification

Recursion using Node.js Promises

Ways to terminate a looping function in jquery

The word "yargs" will not activate a command within a script

Can an onload function be triggered within the location.href command?

Arranging HTML components in Vue.js using v-for loop