How to use two different APIs to get combined results

Question

Hi… I was going throught a code somewhere of jQuery/Ajax and saw there are two APIs. What if I want to get the combined results of these to APIs? How do I do it? The code is follows:

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 use nesting of function to do. Use one function inside the other function. Store the values of the first function in a variable which will be available for the inner function to use. Look at the following code:

   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>

You should get a clear idea from this.