javascript - 从 API 获取数据并使用 jQuery 将其分离到变量中

Question

我正在尝试请求数据，然后使用相关属性填充 9 个不同的 P 标记，但我正在为如何做到这一点而苦苦挣扎。

// Gets BTC Price in 3 currencies
var btc = "https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD,EUR,GBP";

// Gets ETH Price in 3 currencies
var eth = "https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=USD,EUR,GBP";

// Gets LTC Price in 3 currencies
var ltc = "https://min-api.cryptocompare.com/data/price?fsym=LTC&tsyms=USD,EUR,GBP";

$.getJSON( btc, function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( key + val );
  });

  // see fetched data to then be stored for later use...
  alert( "JSON Data: " + items[1,1] );

});

我以前没有使用过 API，所以我不确定我是否也需要 3 个 getJSON 函数，或者我是否可以以某种方式组合这些函数？

这是一个 fiddle ，显示了我目前的进度

https://jsfiddle.net/mvs26pv8/

Answer 1

您可以使用 html() 插入值

// Gets BTC Price in 3 currencies
getData('btc', 'https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD,EUR,GBP');

// Gets ETH Price in 3 currencies
getData('eth', 'https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=USD,EUR,GBP');

// Gets LTC Price in 3 currencies
getData('ltc', 'https://min-api.cryptocompare.com/data/price?fsym=LTC&tsyms=USD,EUR,GBP');

function getData(prefix, url) {
  $.getJSON(url, function(data) {
    $.each(data, function(key, val) {
      $('.' + prefix + '-' + key.toLowerCase()).html(val);
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>BTC in EUR = <span class="btc-eur"></span></p>
<p>BTC in GBP = <span class="btc-gbp"></span></p>
<p>BTC in USD = <span class="btc-usd"></span></p>

<br/><br/>

<p>ETH in EUR = <span class="eth-eur"></span></p>
<p>ETH in GBP = <span class="eth-gbp"></span></p>
<p>ETH in USD = <span class="eth-usd"></span></p>

<br/><br/>

<p>LTC in EUR = <span class="ltc-eur"></span></p>
<p>LTC in GBP = <span class="ltc-gbp"></span></p>
<p>LTC in USD = <span class="ltc-usd"></span></p>