What am I doing wrong in this jQuery API function?

Question

Goodmorning everyone,

I am currently having some issues with my jQuery code. I am trying to use the CoinMarketCap API at cryptokickoff to display cryptocurrencies their stats on my site. I know how to display them but the appending to my columns is not working right.

What I'm trying to do: - I give an array which cointains the crypto's I want to display from the API - I want to append each crypto to a row, which starts at 0 (var i) and goes up by one for every crypto

Now what's happening is that all the crypto's are put into the row with id crypto-3 and I have no idea how that is happening.

Any help would be highly appreciated!

function fillGrid() {
 var cryptos = ["bitcoin","ethereum","ripple"];
 var i = 0;
 jQuery(cryptos).each(function(){
  jQuery.get( "https://api.coinmarketcap.com/v1/ticker/"+cryptos[i]+"/", function( data ) {
      jQuery("#crypto-"+i).append(
       data[0].name);
  });
  i++;
 })
};

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <script src="api.js" type="text/javascript"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-6 col-lg-4" id="crypto-0">
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4" id="crypto-1">
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4" id="crypto-2">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-6 col-lg-4" id="crypto-3">
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4" id="crypto-4">
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4" id="crypto-5">
      </div>
    </div>
  </div>
<script type="text/javascript">
  fillGrid();
</script>
</body>
</html>

The AJAX call is asynchronous, so the `for` loop is completing *before* the requests return data and the `success` event is fired. Hence, `i` is always `3`. You need to use a closure around the logic in your `for`. See the duplicate for more information — Rory McCrossan, Jan 21 '18 at 11:06

Mooseman · Answer 1 · 2018-01-21T11:17:35.033

jQuery's .each is generally used to iterate over members of a jQuery object, (e.g., if I selected jQuery("[id^=crypto") I would employ .each to iterate over these). It would be faster to use a vanilla JS forEach loop to iterate instead.

This maintains the values of el and i within the call stack for the function wrapping your .get, so the iterator doesn't get changed before the callback is fired.

function fillGrid() {
    var cryptos = ["bitcoin","ethereum","ripple"];
    cryptos.forEach(function(el, i)
    {
        jQuery.get("https://api.coinmarketcap.com/v1/ticker/" + el + "/", function(data)
            {
                jQuery("#crypto-" + i).append(data[0].name);
            }
        );
    });
};

Thank you for the quick reply, but using your snippet is still appending them all to #crypto-3: https://i.gyazo.com/d5db058585efbb05b432d9cb3118cdf3.png — Remco Bravenboer, Jan 21 '18 at 11:06

What am I doing wrong in this jQuery API function?

1 Answers1