使用Javascript成功执行JSONP请求后，如何正确打印JSON对象
[英]How to print JSON objects correctly after successful JSONP request with Javascript
问题描述
How to correctly parse/print JSON "scores" objects into demo div (I need just away, home and score data of each)? 
如何正确地将JSON“分数”对象解析/打印到demo div（我只需要离开，住家并为每个对象评分数据）？
My JSON query look like this (code below is also working) 我的JSON查询如下所示（下面的代码也有效）
{ "query": { "count": 18, "created": "2016-09-07T06:10:58Z", "lang": "fi", "results": { "json": [ { "scores": { "away": "ESBJERG ENERGY", "home": "EV ZUG", "match_type": "fin", "status": "fin", "matchId": "1311357", "score": "3-2", "image": "EUROPE (IIHF)" } }, { "scores": { "away": "HC DAVOS", "home": "ROUEN", "match_type": "fin", "status": "fin", "matchId": "1311356", "score": "2-3", "image": "EUROPE (IIHF)"}}]}}}
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </head> <body> <div id="results"></div> <div id="resultsshouldbelikethis"> EV ZUG - ESBJERG ENERGY (3-2)<br> ROUEN - HC DAVOS (2-3)<br> ...and so on </div> <script> jQuery.support.cors = true; $.ajax({ url: "http://query.yahooapis.com/v1/public/yql?q=select%20scores%20from%20json%20where%20url%3D%22http%3a%2f%2fmobile.xscores.com%2fm_livescore%3fsport%3d4%26match_type%3dlive%26match_date%3d2016-09-06%26startPos%3d0%26endPos%3d5000%22%20limit%2050&format=json", type: "GET", timeout: 3000, dataType: "jsonp", success: function(parsa) { document.getElementById("results").innerHTML = parsa.query.scores; console.log(parsa); }, }); </script>
Console log works well but how to print results nicely into a div? 控制台日志效果很好，但是如何将结果很好地打印到div中呢？ "parsa.query.scores;" “ parsa.query.scores;” just results undefined. 只是结果不确定。
3 个解决方案
解决方案1
3 2016-09-07 06:58:25
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery 2.1.4.min.js"></script>
</head>
<body>
<div id="results"></div>
<div id="resultsshouldbelikethis">
EV ZUG - ESBJERG ENERGY (3-2)<br>
ROUEN - HC DAVOS (2-3)<br>
...and so on
</div>
<script>
jQuery.support.cors = true;
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql?q=select%20scores%20from%20json%20where%20url%3D%22http%3a%2f%2fmobile.xscores.com%2fm_livescore%3fsport%3d4%26match_type%3dlive%26match_date%3d2016-09-06%26startPos%3d0%26endPos%3d5000%22%20limit%2050&format=json",
type: "GET",
timeout: 3000,
dataType: "jsonp",
success: function(parsa) {
var news = document.getElementsById("results");
var items = parsa.query.scores;
for(var i = 0; i < items.length; i++) {
var p= document.createElement("p");
p.innerHTML = items[i].away;
news.appendChild(p);
var p = document.createElement("p");
p.innerHTML = items[i].home;
news.appendChild(p);
var p = document.createElement("p");
p.innerHTML = items[i].score;
news.appendChild(p);
}
},
});
</script>
解决方案2
2 2016-09-07 06:50:21
You aren't parsing the JSON properly. 您没有正确解析JSON。 Here is an example which shows the first score. 这是显示第一个分数的示例。 You have to iterate the results to show each score. 您必须迭代结果以显示每个分数。
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </head> <body> <div id="results"></div> <div id="resultsshouldbelikethis"> EV ZUG - ESBJERG ENERGY (3-2)<br> ROUEN - HC DAVOS (2-3)<br> ...and so on </div> <script> jQuery.support.cors = true; $.ajax({ url: "http://query.yahooapis.com/v1/public/yql?q=select%20scores%20from%20json%20where%20url%3D%22http%3a%2f%2fmobile.xscores.com%2fm_livescore%3fsport%3d4%26match_type%3dlive%26match_date%3d2016-09-06%26startPos%3d0%26endPos%3d5000%22%20limit%2050&format=json", type: "GET", timeout: 3000, dataType: "jsonp", success: function(parsa) { document.getElementById("results").innerHTML = parsa.query.results.json[0].scores.score; console.log(parsa); }, }); </script>
解决方案3
1 已采纳 2016-09-07 06:52:37
You need to loop each data one-by-one and add them into div. 您需要一个一个地循环每个数据，并将它们添加到div中。
Try this: 尝试这个：
jQuery.support.cors = true; $.ajax({ url: "http://query.yahooapis.com/v1/public/yql?q=select%20scores%20from%20json%20where%20url%3D%22http%3a%2f%2fmobile.xscores.com%2fm_livescore%3fsport%3d4%26match_type%3dlive%26match_date%3d2016-09-06%26startPos%3d0%26endPos%3d5000%22%20limit%2050&format=json" , type: "GET" , timeout: 3000 , dataType: "jsonp" , success: function (parsa) { var strHtml = ''; $.each(parsa.query.results.json, function (key, value) { strHtml += value.scores.home + ' - ' + value.scores.away; strHtml += '(' + value.scores.score + ')<br />'; }); document.getElementById("results").innerHTML = strHtml; } });
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </head> <body> <div id="results"></div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JavaScript CORS JSON / JSONP请求 - Javascript CORS JSON/JSONP Request
如何使用JavaScript解析嵌套的jsonp对象？ - How to parse nested jsonp objects using javascript?
如何使用jsonp请求获取json - How to get json using a jsonp request
JavaScript的JSON / JSONP问题 - JSON/JSONP problems with JavaScript
如何使用 Javascript 构造来自 json 请求的 json 对象的混合 - How to use Javascript to construct a mixture of json objects from a json request
如果jQuery认为它正在接收JSONP请求，我该如何解释JSON？ - How do I interpret JSON if jQuery thinks it is receiving a JSONP request?
如何发出jsonp请求 - How to make a jsonp request
在成功向ASP.NET MVC控制器发送jQuery Ajax请求后，如何运行JavaScript函数？ - How to run a JavaScript function after a successful jQuery Ajax request to ASP.NET MVC controller?
如何通过Javascript成功进行JSON调用 - How to make a successful JSON call from Javascript
JSONP 请求后的语法错误 - Syntax Error after JSONP request
相关标签