2017-07-17 68 views
0

我有一個非常簡單的計算器,我試圖設置。帶HTML的基本API:創建對象

<!DOCTYPE html> 
<p>Crypto Currency Diversifier</p> 
<div class="container"> 
<h1>Crypto Currency Diversifier</h1> 

<form action="/action_page.php"> 
    Dollars:<br> 
    <input type="text" name="dollars" value="500"><br><br> 
    # of Currencies:<br> 
    <input type="text" name="quantity" value="20"><br><br> 
    <input type="submit" value="Submit"> 
</form> 

下一步是我需要拉前20名(數量)cryptocurrencies,然後除以相對於市值500之間(美元)。

這裏的API網站:https://coinmarketcap.com/api/

點擊https://api.coinmarketcap.com/v1/ticker/?limit=10顯示我的排名前10位的貨幣。

如何在頁面上添加每種貨幣的所有市場上限。然後從他們創造比率?

  • 數學部分是非常簡單的,我沒有得到的是如何從API鏈接實際拉動數據並獲得可行的格式。
+0

查找查詢和Ajax。花點時間閱讀:https://stackoverflow.com/help/mcve –

回答

0

查找的Jquery和Ajax:

您可以像這樣實現的:

function getCurrencies() 
 

 
{ 
 
    $.ajax(
 
    {url:"https://api.coinmarketcap.com/v1/ticker/?limit=20", 
 
    success:function(data) { 
 
       //console.log(data); 
 
       var totalcap=0.0; 
 
       var u=$("<ul>"); 
 
       for(var i=0;i<data.length;i++) { 
 
        var currency=data[i]; 
 
        var cap=parseFloat(currency["market_cap_usd"]); 
 
        var li=$("<li />").html(currency["name"] + " " + cap.toFixed(2).replace(/./g, function(c, i, a) { 
 
    return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c; 
 
})); 
 
     
 
        u.append(li); 
 
        totalcap+=cap; 
 
       } 
 
       $('#currlist').html('').append(u); 
 
       $('#cap').html(totalcap.toFixed(2).replace(/./g, function(c, i, a) { 
 
    return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c; 
 
})); 
 
       $('#data').val(JSON.stringify(data)); 
 
      }, 
 
      error:function() { 
 
       alert("Error"); 
 
      }, 
 
      dataType:"json", 
 
      type:"get"} 
 
    
 
); 
 

 
}
textarea {width:600px;height:250px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<p>Crypto Currency Diversifier</p> 
 
<div class="container"> 
 
<h1>Crypto Currency Diversifier</h1> 
 

 
<form action="/action_page.php"> 
 
    Dollars:<br> 
 
    <input type="text" name="dollars" value="500"><br><br> 
 
    # of Currencies:<br> 
 
    <input type="text" name="quantity" value="20"><br><br> 
 
    <input type="submit" value="Submit" onclick="getCurrencies(); return false" 
 
> 
 
    Total Market Cap:<div id="cap"></div><br /> 
 
    Currencies: <div id="currlist"></div><br /> 
 
    <textarea id="data"></textarea> 
 
</form>