将JSON结果添加到HTML

时间:2011-12-13 18:07:43

标签: javascript jquery json jsonp

我有这个带货币汇率的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>

4 个答案:

答案 0 :(得分:2)

如果你有:

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

此代码将使用类值获取div内的USD值。

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

如果您想要创建一个包含所有费率的表格,则必须循环使用费率索引。

答案 1 :(得分:2)

假设你想要遍历所有这些费率......你会想要围绕这一点做点什么。

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

答案 2 :(得分:1)

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

答案 3 :(得分:1)

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

类似的东西?