Question

我想将JSON数据加载到Javascript变量中，解析出一些数据然后以HTML格式显示。

JSON数据来自Yahoo finance API http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail

我甚至不确定如何将数据输入变量。一旦我这样做，我想提取“名称”和“价格”，并将它们输出到HTML表格中。

Answer 1

仅使用JavaScript：

如果您通过XMLHttpRequest请求WebService网址，则会收到CORS问题：

XMLHttpRequest无法加载 http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail。请求中不存在“Access-Control-Allow-Origin”标头资源。因此，不允许原点'null'访问。

但是，您可以使用https://crossorigin.me/服务。

然后，您应该请求：«https://crossorigin.me/http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail»。最后，这可以很容易地在JavaScript中使用。您不需要使用jQuery。

我做了一个演示。

这样的事情：

(function() {
  var newXHR;

  // Helper function to make XMLHttpRequest without using 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; // Will executes a function when the HTTP request state changes.
    return newXHR;
  }

  // Call the WebService by using 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); // Store the WebServices JSON data to the «data» variable.

        var table = document.getElementById("table"); // Get the table.

        // Build the HTML 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>

此答案的缩写版本：

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

Answer 2

您可以使用JSON.parse(strinfied_json)在javascript中解析JSON。

JSON.parse将JSON转换为普通的javascript对象，您可以使用[]或.运算符进行查询。

以下是一个例子：

var stock_data_json = "{
  list: {
    meta: {
      type: \"resource-list\",
      start: 0,
      count: 1
    },
    resources: [
      {
        resource: {
          classname: \"Quote\",
          fields: {
            change: \"19.061035\",
            chg_percent: \"0.404084\",
            day_high: \"4736.155273\",
            day_low: \"4684.284668\",
            issuer_name: \"NASDAQ Composite\",
            name: \"NASDAQ Composite\",
            price: \"4736.155273\",
            symbol: \"^IXIC\",
            ts: \"1462569359\",
            type: \"index\",
            utctime: \"2016-05-06T21:15:59+0000\",
            volume: \"0\",
            year_high: \"5231.940000\",
            year_low: \"4209.760000\"
          }
        }
      }
    ]
  }
}"

var stock_data = JSON.parse(stock_data_json)

// Get the first resource
var resource_0 = stock_data["list"]["resources"][0]["resource"];

var name = resource_0["name"];
var price = resource_0["price"];

$('#name_element').text(name);
$('#price_element').text(price);

Answer 3

您可以使用jquery getJSON方法：jQuery.getJSON（url [，data] [，success]）将JSON数据从url加载到Javascript变量中，在以下示例中，displayHtml是您要使用以下函数处理获取数据的函数：

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")
      });

Answer 4

感谢您的回复。我无法让您的示例使用下面的代码。第一个警报触发，但在.getjson之后似乎没有任何工作。我假设一旦工作，它会将URL加载到displayHTML中进行解析吗？

<!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("startting");
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("done");

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

如何将JSON数据转换为变量，解析，输出为HTML

4 个答案: