如何在Javascript成功请求JSONP后正确打印JSON对象

How to print JSON objects correctly after successful JSONP request with Javascript

本文关键字：打印 JSON 对象 JSONP Javascript 成功 请求      更新时间：2023-09-26

如何正确解析/打印JSON "分数"对象到demodiv(我需要只是离开，回家和每个分数数据)?

我的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>

控制台日志工作得很好，但如何很好地打印结果到一个div?"parsa.query.scores;"只是结果未定义

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

您没有正确解析JSON。下面是显示第一个分数的例子。您必须迭代结果以显示每个分数。

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

您需要逐一循环每个数据并将它们添加到div中。

试试这个:

    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>

相关文章：