javascript - $.getJSON() call within $.each() loop not executing in order -
i looping on html table , performing $.getjson() call based on data read each row. want take data $.getjson call , insert row variables read.
however, when run code seems execute out of sync. changes made last row of table instead of in order.
here's table 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 jquery url built , call 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 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 variables 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 @ bit of loss proceed. can tell me why requests running out of order this?
the problem in script not because of order of execution, because of $row variable.
you have created global variable, each iteration of loop value overridden latest row, @ end of loop refer last row, when ajax requests finished when call $row.siblings(".value").text("£" + result); update last row.
instead need declare $row local variable each() callback function each iteration of loop have own copy of 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 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 variables 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>
Comments
Post a Comment