CODEWITHSUNDEEP
javascriptjson
tj001
tj001

Reputation: 47

How to Access and Apply JSON Data from External Site?

A market data API provides access to JSON formatted data via hyperlink, as follows:

{"status":{"code":200,"message":"Success."},"results":[{"symbol":"IBM","timestamp":"2015-06-22T00:00:00-04:00","tradingDay":"2015-06-22","open":160.1176,"high":160.7766,"low":159.6878,"close":160.194,"volume":2445578,"openInterest":null},
{"symbol":"IBM","timestamp":"2015-06-23T00:00:00-04:00","tradingDay":"2015-06-23","open":160.8148,"high":162.3333,"low":160.0412,"close":161.044,"volume":3875734,"openInterest":null}, 
 ... etc ...,
{"symbol":"IBM","timestamp":"2016-10-20T00:00:00-04:00","tradingDay":"2016-10-20","open":151.28,"high":152.9,"low":151.02,"close":151.52,"volume":4023100,"openInterest":null}]}

I'm trying to learn how to use the data; e.g., present it in table format on an html page, as shown below. No joy so far. Basic Question => How do I correctly access, loop through and format the data to write / output it to an html page?

<!doctype html>

<html>
<head>
</head>
<body>

<h1>Example</h1>
<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://marketdata.websol.barchart.com/getHistory.json?key=[my_api_key#]&symbol=IBM&type=daily&startDate=20150621000000";

xmlhttp.onreadystatechange=function() {
    if (this.status.code == 200 && this.status.message == Success) {
        myFunction(this.responseText);
    }
}

xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" +
        arr[i].results.symbol +
        "</td><td>" +
        arr[i].results.tradingDay +
        "</td><td>" +
        arr[i].results.open +
        "</td><td>" +
        arr[i].results.high +
        "</td><td>" +
        arr[i].results.low +
        "</td><td>" +                             
        arr[i].results.close +
        "</td><td>" +                             
        arr[i].results.volume +
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Upvotes: 2

Views: 87

Answers (2)

Mamdouh Saeed
Mamdouh Saeed

Reputation: 2324

results you want to print is an array so use for loop

{"status":{"code":200,"message":"Success."},"results":[{"symbol":"IBM","timestamp":"2015-06-22T00:00:00-04:00","tradingDay":"2015-06-22","open":160.1176,"high":160.7766,"low":159.6878,"close":160.194,"volume":2445578,"openInterest":null},
{"symbol":"IBM","timestamp":"2015-06-23T00:00:00-04:00","tradingDay":"2015-06-23","open":160.8148,"high":162.3333,"low":160.0412,"close":161.044,"volume":3875734,"openInterest":null}, 
 ... etc ...,
{"symbol":"IBM","timestamp":"2016-10-20T00:00:00-04:00","tradingDay":"2016-10-20","open":151.28,"high":152.9,"low":151.02,"close":151.52,"volume":4023100,"openInterest":null}]}
<!doctype html>

<html>
<head>
</head>
<body>

<h1>Example</h1>
<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://marketdata.websol.barchart.com/getHistory.json?key=[my_api_key#]&symbol=IBM&type=daily&startDate=20150621000000";

xmlhttp.onreadystatechange=function() {
    if (this.status.code == 200 && this.status.message == Success) {
        myFunction(this.responseText);
    }
}

xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

    for(i = 0; i < arr.length; i++) {
var results_ = arr[i].results;
        for(n=0;n<results_.length;n++){
out += "<tr><td>" +
        results_[n].symbol +
        "</td><td>" +
        results_[n].tradingDay +
        "</td><td>" +
        results_[n].open +
        "</td><td>" +
        results_[n].high +
        "</td><td>" +
        results_[n].low +
        "</td><td>" +                             
        results_[n].close +
        "</td><td>" +                             
        results_[n].volume +
        "</td></tr>";
}
    }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Upvotes: 0

Jordi Flores
Jordi Flores

Reputation: 2150

You can access jsonData as it's an object.

Take a look at this example getting the info of symboland timestamp of your example.

Then you only have to construct the html strings.

var jsonData = {"status":{"code":200,"message":"Success."},"results":[{"symbol":"IBM","timestamp":"2015-06-22T00:00:00-04:00","tradingDay":"2015-06-22","open":160.1176,"high":160.7766,"low":159.6878,"close":160.194,"volume":2445578,"openInterest":null},
{"symbol":"IBM","timestamp":"2015-06-23T00:00:00-04:00","tradingDay":"2015-06-23","open":160.8148,"high":162.3333,"low":160.0412,"close":161.044,"volume":3875734,"openInterest":null},
{"symbol":"IBM","timestamp":"2016-10-20T00:00:00-04:00","tradingDay":"2016-10-20","open":151.28,"high":152.9,"low":151.02,"close":151.52,"volume":4023100,"openInterest":null}]}


function myFunction(response) {
var numResults = response.results.length; //it's an array
for (var i=0; i < numResults; i++)  {
  var symbol = jsonData.results[i]["symbol"];
  var timestamp = jsonData.results[i]["timestamp"];
  
  $("table").append("<tr><td>" + symbol + "</td><td>" + timestamp + "</td></tr>");
  
  }
              
  
}


myFunction(jsonData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1"></table>

Upvotes: 2

Related Questions