使用 Javascript 成功请求 JSONP 后如何正确打印 JSON 对象答案

【问题标题】：How to print JSON objects correctly after successful JSONP request with Javascript使用 Javascript 成功请求 JSONP 后如何正确打印 JSON 对象
【发布时间】：2016-09-07 06:44:30
【问题描述】：

如何正确地将 JSON“分数”对象解析/打印到演示 div 中（我需要每个对象的离场、主场和分数数据）？

我的 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;”只是结果未定义。

【问题讨论】：

标签： javascript jquery json parsing

【解决方案1】：

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

您没有正确解析 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>

【讨论】：

不错！这让我很快乐。我会在几分钟后接受这个解决方案。
酷。乐于助人:)

【解决方案3】：

您需要将每个数据一个一个循环并添加到 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>

【讨论】：

@sukkis：很高兴为您提供帮助