jQuery ajax - two separate API requests with combined results

Question

Evening Internet World,

First post here so be gentle, i've learnt a lot from this site thus far.. and now I seek help..

I've tried a few variations of code like $when & $then, function in function, but I can't get the result I seek, it doesn't combine results. So thought best to ask away here and show my code.. Please help..

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row" id="stats">
  <div class="col-4 col-12-large">
    <h4><strong>Ether contributed</strong></h4>
    <span id="eth_balance" style="font-size: 2.5em;">&mdash;</span>
    <!--<p id="total-ether-message" style="font-size:11px;"></p>-->
  </div>
  <div class="col-4 col-12-large">
    <h4><strong>Contributions in USD</strong></h4>
    <span id="token_usd" style="font-size: 2.5em;">&mdash;</span>
    <!--<p id="total-usd-message" style="font-size:11px;"></p>-->
  </div>
  <div class="col-4 col-12-large">
    <h4><strong>Tokens issued</strong></h4>
    <span id="token_amount" style="font-size: 2.5em;">&mdash;</span>
    <!-- <p id="total-tokens-message" style="font-size:11px;"></p> -->
  </div>
</div>

js

var token = '0xa74476443119A942dE498590Fe1f2454d7D4aC0d';
var address = '0xda0aed568d9a2dbdcbafc1576fedc633d28eee9a';

$.get("https://api.tokenbalance.com/token/" + token + "/" + address +'', function(data) {
    $("#eth_balance").html(Math.round(data.eth_balance).toFixed(2) + " ETH");
    $("#token_amount").html(Math.round(data.balance).toFixed(2) + " " + data.symbol);
});

$.get("https://api.etherscan.io/api?module=stats&action=ethprice", function(data) {
    $("#token_usd").html("$ " + Math.round(data.result.ethusd).toFixed(2));
    // Ideally I'd like to get [ data.result.ethusd x data.eth_balance ] to replace #token_usd, all wrapped in one function
    alert(data.result.ethusd)
});

Answer 1

You can move the second ajax call inside the first, and store values from data in a variable that will be available to the inner function too.

Like so (second call won't work here or in a fiddle):

    var token = '0xa74476443119A942dE498590Fe1f2454d7D4aC0d';
    var address = '0xda0aed568d9a2dbdcbafc1576fedc633d28eee9a';

    $.get("https://api.tokenbalance.com/token/" + token + "/" + address + '', function (data) {
        var eth_balance = data.eth_balance;
        $("#eth_balance").html(Math.round(data.eth_balance).toFixed(2) + " ETH");
        $("#token_amount").html(Math.round(data.balance).toFixed(2) + " " + data.symbol);
        $.get("https://api.etherscan.io/api?module=stats&action=ethprice", function (data) {
            $("#token_usd").html("$ " + Math.round(data.result.ethusd * eth_balance).toFixed(2));
            // Ideally I'd like to get [ data.result.ethusd x data.eth_balance ] to replace #token_usd, all wrapped in one function
            alert(data.result.ethusd)
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row" id="stats">
    <div class="col-4 col-12-large">
        <h4>
            <strong>Ether contributed</strong>
        </h4>
        <span id="eth_balance" style="font-size: 2.5em;">&mdash;</span>
        <!--<p id="total-ether-message" style="font-size:11px;"></p>-->
    </div>
    <div class="col-4 col-12-large">
        <h4>
            <strong>Contributions in USD</strong>
        </h4>
        <span id="token_usd" style="font-size: 2.5em;">&mdash;</span>
        <!--<p id="total-usd-message" style="font-size:11px;"></p>-->
    </div>
    <div class="col-4 col-12-large">
        <h4>
            <strong>Tokens issued</strong>
        </h4>
        <span id="token_amount" style="font-size: 2.5em;">&mdash;</span>
        <!-- <p id="total-tokens-message" style="font-size:11px;"></p> -->
    </div>
</div>