Why is the method $.get() only executed once in a loop?

Question

I have the following code in my program, which is supposed to run through my devices, and test if $.get() gives a result or fails, but I notice with these console logs that it only does that for the last one in the loop.

Logs for 2 devices in the loop:

before get: efbekmtfgjyz9pr_0_0
before get: gu2u1hnspgo2vhk_1_0
done get: gu2u1hnspgo2vhk_1_0
always get: gu2u1hnspgo2vhk_1_0

The code:

var deviceIx = 0;
while (deviceIx < service.devices.length) {

var devId = buildUniqueHTMLId(
    device.jid + "_" + deviceIx + "_" + serviceIx
);
console.log("before get: " + devId);
$.get(device.thumbnail).done(function () {
    console.log("done get: " + devId);
    $('.devicelist #deviceImg-' + devId).attr("src", device.thumbnail);

    var img = device.thumbnail;
    var caption = "FRONT";
    $("#deviceImagesCarousel .carousel-inner").append("<div class='carousel-item'><img class='d-block w-100' src='" + img + "' alt='" + img + "'><div class='carousel-caption'>" + caption +"</div></div>");
    $("#deviceImagesCarousel .carousel-indicators").append("<li data-target='#deviceImagesCarousel' data-slide-to='0' ></li>");
    $('#deviceImagesCarousel .carousel-inner .carousel-item').first().addClass('active');
    $('#deviceImagesCarousel .carousel-indicators li').first().addClass('active');
}).fail(function () {
    console.log("fail get: " + devId);
    $('.devicelist #deviceImg-' + devId).attr("src", 'script/iopsys/devicemanager/images/hardwareversions/gateway/na_t.png');
    $("#deviceImagesCarousel .carousel-inner").append("<div class='carousel-item'><img class='d-block w-100' src='script/iopsys/devicemanager/images/hardwareversions/gateway/na_t.png' alt='First slide'></div>");
    $("#deviceImagesCarousel .carousel-indicators").append("<li data-target='#deviceImagesCarousel' data-slide-to='0' ></li>");
    $('#deviceImagesCarousel .carousel-inner .carousel-item').first().addClass('active');
    $('#deviceImagesCarousel .carousel-indicators li').first().addClass('active');
}).always(function() {
    console.log("always get: " + devId);
    $('.devicelist #deviceImg-' + devId).attr("src", device.thumbnail);
});

If anyone can explain why this happens, and does not log for the first device in this example, then I would be very happy.

it comes from a method I wrote to build the devices id to be unique: device.jid + "_" + deviceIx + "_" + serviceIx — Amber Akkermans, Jul 25 '22 at 13:43
It does execute `$.get` multiple times, but the `var devId` will be the same in all your asynchronous callbacks. Use `const devId` instead. — Bergi, Jul 25 '22 at 13:59

score 0 · Accepted Answer · answered Jul 25 '22 at 13:44

Where is devId assigned?

That said, do not loop async code unless you use promises.

I would suggest you do this instead

let deviceIx = 0;
const getDev = () => {
  if (deviceIx >= service.devices.length) return
  let device = service.devices[deviceIx];
  let devId = device.id; // or whatever
  console.log("before get: " + devId);
  $.get(device.thumbnail).done(function() {
    console.log("done get: " + devId);
    $('.devicelist #deviceImg-' + devId).attr("src", device.thumbnail);

    var img = device.thumbnail;
    var caption = "FRONT";
    $("#deviceImagesCarousel .carousel-inner").append("<div class='carousel-item'><img class='d-block w-100' src='" + img + "' alt='" + img + "'><div class='carousel-caption'>" + caption + "</div></div>");
    $("#deviceImagesCarousel .carousel-indicators").append("<li data-target='#deviceImagesCarousel' data-slide-to='0' ></li>");
    $('#deviceImagesCarousel .carousel-inner .carousel-item').first().addClass('active');
    $('#deviceImagesCarousel .carousel-indicators li').first().addClass('active');
  }).fail(function() {
    console.log("fail get: " + devId);
    $('.devicelist #deviceImg-' + devId).attr("src", 'script/iopsys/devicemanager/images/hardwareversions/gateway/na_t.png');
    $("#deviceImagesCarousel .carousel-inner").append("<div class='carousel-item'><img class='d-block w-100' src='script/iopsys/devicemanager/images/hardwareversions/gateway/na_t.png' alt='First slide'></div>");
    $("#deviceImagesCarousel .carousel-indicators").append("<li data-target='#deviceImagesCarousel' data-slide-to='0' ></li>");
    $('#deviceImagesCarousel .carousel-inner .carousel-item').first().addClass('active');
    $('#deviceImagesCarousel .carousel-indicators li').first().addClass('active');
  }).always(function() {
    console.log("always get: " + devId);
    $('.devicelist #deviceImg-' + devId).attr("src", device.thumbnail);
    deviceIx++
    getDev();
  });
};
getDev();

@AmberAkkermans consider accepting the answer if that solved your problem. That's good SO etiquette. — Silviu Burcea, Jul 26 '22 at 07:11

Why is the method $.get() only executed once in a loop?

1 Answers1