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

-1

如何正确解析/打印JSON“分数”对象到演示div（我需要的就是每个家庭和乐谱数据）？如何在使用Javascript成功完成JSONP请求后正确打印JSON对象

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

来源

2016-09-07 sukkis

你需要循环的每个数据一个接一个，并将其添加到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>

来源

2016-09-07 06:52:37

很好地完成。谢谢 – sukkis

@sukkis：很高兴帮助你 –

您不能正确解析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>

来源

2016-09-07 06:50:21

不错！这件事情让我感到很快乐。我会在几分钟后接受这个解决方案。 – sukkis

很酷。高兴地帮助:) –

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

来源

2016-09-07 06:58:25

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

回答

相关问题