将 JSON 结果添加到 HTML

Add JSON results to HTML

本文关键字：HTML 添加 结果 JSON      更新时间：2023-09-26

我有这个带有货币汇率的 JSON 文件：

http://openexchangerates.org/latest.json

有人可以帮助我使用 jQuery 脚本，以便结果如下所示：

<div class="currency">USD</div><div class="value">1.000</div> 

<script type="text/javascript">
   $(document).ready(function() {
    var url =  "http://openexchangerates.org/latest.json";
    $.getJSON(url + "?callback=?", null,function(data) {
       // ADD CODE HERE
    });
    });

</script>

假设你想遍历所有这些速率......你会想围绕这一点做一些事情。

<script type="text/javascript"> 
   $(document).ready(function() { 
    var url =  "http://openexchangerates.org/latest.json"; 
    $.getJSON(url + "?callback=?", null,function(data) { 
       var myElementToAppendTo = $("#myElement");  // Note: add whatever element you are putting this into here
       $.each(data.rates, function(key, value) {
         if(key == "EUR" || key == "USD" || key == "GBP") {
           myElementToAppendTo.append("<div class='currency'>" + key + "</div><div class='value'>" + value + "</div>");
         }
       }
    }); 
   }); 

</script>

如果您有：

<div class="currency">USD</div><div class="value"></div>

此代码将获取带有类值的div 内的美元值。

$('div.value').text(data.rates.USD);

如果要创建一个包含所有费率的表，则必须遍历费率索引。

<script type="text/javascript">
   $(document).ready(function() {
    var url =  "http://openexchangerates.org/latest.json";
    $.getJSON(url + "?callback=?", null,function(data) {
         jQuery.each(data, function(currency, value) {
         $("body").append("<div class="currency">"+currency+"</div><div class="value">"+value+"</div>");
          });
    });
    });
</script>

$.each(data.rates,function(key,val){
  var Div1 = $('<div class="currency" />').text(key).appendTo($('YOURFORM'));
  var Div2 = $('<div class="value" />').text(val).appendTo($('YOURFORM'));
});

类似的东西？

相关文章：