I have an Array of elements and I need to loop over them getting a value from a server at each pass. With the following code I am getting all the results mixed, due to the asynchronous call in the forEach loop. I need the results to be shown in the same order as in the Array.
var en_devices= [
["72", "Device 1"],
["73", "Device 2"],
["74", "Device 3"],
["75", "Device 4"],
["76", "Device 5"],
["5158", "Device 6"]
];
en_devices.forEach(element => {
$.get('/check-energy/'+element[0], function(data){
content = "<div class='service'>"+element[1]+"</div> <div class='watt'>"+data+"</div><br/>";
$('#description-en').append(content);
});
});
If
$.get
is jQuery.get() then it returns a promise and you can use asynchronous programming.As @CherryDT said, utilize it in an
async
function. If you don't have one, use it an IIFE - Immediately Invoked Function Expression:UPDATE:
As @huyts pointed, the above method calls the API one at time. To make it parallel, use
Promise.all
: