Question

市场数据API通过超链接提供对JSON格式数据的访问，如下所示：

{"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}]}

我正在努力学习如何使用这些数据;例如，在html页面上以表格格式呈现它，如下所示。到目前为止没有喜悦。基本问题=＆gt;如何正确访问，循环并格式化数据以将其写入/输出到html页面？

<!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>

Answer 1

您可以访问jsonData，因为它是一个对象。

查看此示例，获取您示例的symbol和timestamp信息。

然后你只需构造html字符串。

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>

Answer 2

你要打印的

results是一个数组，所以用于循环

＆＃13;

{"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}]}

＆＃13;

<!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>

＆＃13;

如何从外部站点访问和应用JSON数据？

2 个答案: