Javascript 如何将JSON数据转换成变量、解析、输出为HTML_Javascript_Json_Parsing_Variables

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

javascript json parsing variables

Javascript 如何将JSON数据转换成变量、解析、输出为HTML,javascript,json,parsing,variables,Javascript,Json,Parsing,Variables,我想将JSON数据加载到Javascript变量中，解析出一些数据，然后用HTML显示 JSON数据来自Yahoo finance API 我甚至不知道如何将数据输入变量。一旦我这样做了，我想提取“name”和“price”并将它们输出到HTML表中。您可以使用JSON.parse（strinfied_JSON）在javascript中解析JSON JSON.parse将JSON转换为普通的旧javascript对象，您可以使用[]或运算符查询该对象下面是一个例子： var stock_da

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

JSON数据来自Yahoo finance API

我甚至不知道如何将数据输入变量。一旦我这样做了，我想提取“name”和“price”并将它们输出到HTML表中。

您可以使用

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

您可以使用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")
      });

仅使用JavaScript:

如果您通过请求WebService URL，您将收到CORS问题：

无法加载XMLHttpRequest . 请求的服务器上不存在“Access Control Allow Origin”标头资源。因此，不允许访问源“null”

但是，您可以使用该服务

然后，您应该请求：«»。最后，这可以很容易地在JavaScript中使用。您不需要使用jQuery

我做了一个演示

大概是这样的：

（函数（）{
var-newXHR；
//Helper函数使XMLHttpRequest不使用jQuery或AngularJS$http服务。
函数sendXHR（选项）{
//（现代浏览器）或（Internet Explorer 5或6）。
newXHR=newXMLHttpRequest（）| | newActiveXObject（“Microsoft.XMLHTTP”）；
if（options.sendJSON==true）{
options.contentType=“application/json；charset=utf-8”；
options.data=JSON.stringify（options.data）；
}否则{
options.contentType=“application/x-www-form-urlencoded”；
}
newXHR.open（options.type、options.url、options.async | | true）；
newXHR.setRequestHeader（“内容类型”，options.contentType）；
newXHR.send（（options.type==“POST”）？options.data:null）；
newXHR.onreadystatechange=options.callback；//将在HTTP请求状态更改时执行函数。
返回newXHR；
}
//使用helper函数调用WebService。
sendXHR({
键入：“获取”，
url:“https://crossorigin.me/http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail",
回调：函数（）{
if（newXHR.readyState==4&&newXHR.status==200）{
var data=JSON.parse（newXHR.response）；//将WebServices JSON数据存储到«data»变量中。
var table=document.getElementById（“表”）；//获取表。
//构建HTML表。
var html=“”；
html+=“名称价格”；
html+=“”；
html+=“”；
对于（i=0；i
#表格{
边框：实心1px#中交；
边界塌陷：塌陷；
}
#表td{
边框：实心1px#中交；
填充物：5px；
}
谢谢您的回复。我无法让您的示例使用下面的代码。第一个警报触发，但在.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>


演示
警报（“启动”）；
var jqxhr=$.getJSON（“http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail，显示HTML）
.fail（函数（）{
警报（“以下人员无响应：http://finance.yahoo.com/webservice/v1/symbols/%5EIXIC/quote?format=json&view=detail")
});
警惕（“完成”）；
这是教程或书中章节的主题，而不是一般问题。