$.getJSON() call within $.each() loop not executing in order

Question

I am looping over an HTML table and performing a $.getJSON() call based on data read from each row. I then want to take the data from that $.getJSON call and insert it back into the row from which the variables were read.

However, when I run my code it seems to execute out of sync. All the changes are made to the last row of the table instead of in order.

Here's a working jsFiddle with my code

Here's the table I am reading data from:

<table id="isa-table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Fund / Stock</th>
            <th>Buy Price (£)</th>
            <th>Amount</th>
            <th>%</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr data-quantity="3.5071" data-symbol="B41XG30" data-type="Fund">
            <td>27 Oct 15</td>
            <td>VANGUARD INV UK LT LIFESTRATEGY 100 PERC EQTY</td>
            <td>142.56914</td>
            <td class="isa-buy-price">£500.00</td>
            <td class="percentage">16%</td>
            <td class="value">123</td>
        </tr>
        <tr data-quantity="329.8154" data-symbol="B6QQ9X9" data-type="Fund">
            <td>14 Dec 15</td>
            <td>BLACKROCK FM LTD JAPAN EQUITY TRACKER D ACC</td>
            <td>1.51597</td>
            <td class="isa-buy-price">£500.00</td>
            <td class="percentage">14</td>
            <td class="value">123</td>
        </tr>
        <tr data-quantity="402.9009" data-symbol="B23FNS4" data-type="Fund">
            <td>11 Jan 16</td>
            <td>THREADNEEDLE INV UK PROP TST INSTL NET ACC</td>
            <td>1.24097</td>
            <td class="isa-buy-price">£500.00</td>
            <td class="percentage">16%</td>
            <td class="value">123</td>
        </tr>
    </tbody>
</table>

And here's my jQuery where the URL is built and the call is made:

$(".isa-buy-price").each(function () {
    $row = $(this);
    var quantity = $(this).parent("tr").data("quantity");
    var symbol = $(this).parent("tr").data("symbol");
    var type = $(this).parent("tr").data("type");

    // Build URL to call YQL
    var url = "";
    if (type == "Fund") {
        url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewFund%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'key-info-lozenge'%5D%2Ftable%2Ftbody%2Ftr%5B2%5D%2Ftd%2Fstrong%2Ftext()%22&format=json&callback=";
    } else {
        url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewShare%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'price'%5D%2Ftbody%2Ftr%2Ftd%5B1%5D%22&format=json&callback=";
    }

    $.getJSON(url, function (json) {
        // Set the variables from the results array
        var result = "";
        if (type == "Fund") {
            result = json.query.results.replace(/\s/g, '');
        } else {
            result = json.query.results.td.content.replace(/\s/g, '');
        }

        success: {
            $row.siblings(".value").text("£" + result);
        }
    });
});

I am at a bit of a loss for where to proceed. Can anyone tell me why the requests are running out of order like this?

It will not, since ajax is asynchronous there is no way to predict which request will finish first... — Arun P Johny
– Arun P Johny, Commented Jan 21, 2016 at 3:07
There are other solutions like, you can wait for all the ajax requests to finish then render the contents — Arun P Johny
– Arun P Johny, Commented Jan 21, 2016 at 3:07
Also why is it a problem that the requests are running out of order? — Arun P Johny
– Arun P Johny, Commented Jan 21, 2016 at 3:16
@ArunPJohny Check the jsFiddle I linked - all the changes are being made to the last row. — MSOACC
– MSOACC, Commented Jan 21, 2016 at 3:23

Arun P Johny · Accepted Answer · 2016-01-21 03:29:24Z

The problem in your script is not because of the order of the execution, but because of the $row variable.

You have created it as a global variable, so each iteration of the loop its value is overridden to the latest row, so at the end of the loop it will refer to the last row, now when the ajax requests are finished when they call $row.siblings(".value").text("£" + result); it will update the last row.

Instead you need to declare $row as a local variable to the each() callback function so that each iteration of the loop will have its own copy of the variable.

$(".isa-buy-price").each(function() {
  var $row = $(this);
  var quantity = $(this).parent("tr").data("quantity");
  var symbol = $(this).parent("tr").data("symbol");
  var type = $(this).parent("tr").data("type");

  // Build URL to call YQL
  var url = "";
  if (type == "Fund") {
    url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewFund%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'key-info-lozenge'%5D%2Ftable%2Ftbody%2Ftr%5B2%5D%2Ftd%2Fstrong%2Ftext()%22&format=json&callback=";
  } else {
    url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewShare%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'price'%5D%2Ftbody%2Ftr%2Ftd%5B1%5D%22&format=json&callback=";
  }

  $.getJSON(url, function(json) {
    // Set the variables from the results array
    var result = "";
    if (type == "Fund") {
      result = json.query.results.replace(/\s/g, '');
    } else {
      result = json.query.results.td.content.replace(/\s/g, '');
    }

    $row.siblings(".value").text("£" + result);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="isa-table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Fund / Stock</th>
      <th>Buy Price (£)</th>
      <th>Amount</th>
      <th>%</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr data-quantity="3.5071" data-symbol="B41XG30" data-type="Fund">
      <td>27 Oct 15</td>
      <td>VANGUARD INV UK LT LIFESTRATEGY 100 PERC EQTY</td>
      <td>142.56914</td>
      <td class="isa-buy-price">£500.00</td>
      <td class="percentage">16%</td>
      <td class="value">123</td>
    </tr>
    <tr data-quantity="329.8154" data-symbol="B6QQ9X9" data-type="Fund">
      <td>14 Dec 15</td>
      <td>BLACKROCK FM LTD JAPAN EQUITY TRACKER D ACC</td>
      <td>1.51597</td>
      <td class="isa-buy-price">£500.00</td>
      <td class="percentage">14</td>
      <td class="value">123</td>
    </tr>
    <tr data-quantity="402.9009" data-symbol="B23FNS4" data-type="Fund">
      <td>11 Jan 16</td>
      <td>THREADNEEDLE INV UK PROP TST INSTL NET ACC</td>
      <td>1.24097</td>
      <td class="isa-buy-price">£500.00</td>
      <td class="percentage">16%</td>
      <td class="value">123</td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

$.getJSON() call within $.each() loop not executing in order

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related