CODEWITHSUNDEEP
javascriptjqueryajaxgetjson
MSOACC
MSOACC

Reputation: 3665

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

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?

Upvotes: 0

Views: 259

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

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>

Upvotes: 1

Related Questions