Variable in success: of Ajax which is running in a loop not being updated

Question

In the following code, I'm running a for loop, which sets a variable 'nets' which is updated for each item within the array netnos[].

Then I call Ajax to process a php to produce a listing, which is correctly being output to response.

I'm setting a variable theList inside the success function, which combines the nets variable with the response. Then appending to my subNets div.

The problem is the 'nets' variable here never updates from its original value, even thou the response is correct. This means the data: {q : nets} does changes correctly. So why is nets in the success: not being updated? It always retains the value of the first item in the array.

<script>    
        $(document).ready(function(){
            $(document).on('click', '.subnetkey', function() {
                var thelist = "";
                var strr   = $(".subnetkey").val();   // The string of net numbers like 789, 790
                var count  = strr.split(',').length;  // How many are in the string   2 in the test case
                var netnos = strr.split(",");         // The string made into an array of nets

                $("#subNets").removeClass("hidden");  // Remove the hidden from the subNets div

            for (i=0; i<count; i++) {                 // Loop through
                var nets = netnos[i];                 // Find each net number from the array
            // alert('i= '+i+' nets= '+nets); // When i=0 nets = 789, when i=1 nets = 790

                $.ajax({
                    type:    "GET",
                    url:     "getactivities.php",
                    data:    {q : nets},
                    success: function(response) {
                        var thelist = "#"+nets+"<br>"+response+"<br><br>";
                        $("#subNets").append(thelist);
                    },
                    error:   function() {
                        alert('Sorry no nets.');
                    }
                }) // End of ajax

              }  // End for loop

            }); // End of on(click) function
        }); // End of ready function
</script>

Answer 1

The problem is the name nets is lexically bound in the for loop, and its value will change as you iterate i. An easy way to fix this is to use Array.forEach as each invocation of the function it uses for iteration will have its own binding of nets - and it'll lead to shorter code too as you don't even need i!

$(document).ready(function() {
  $(document).on("click", ".subnetkey", function() {
    var strr = $(".subnetkey").val();
    var netnos = strr.split(",");

    $("#subNets").removeClass("hidden");
    netnos.forEach(nets => {
      $.ajax({
        type: "GET",
        url: "getactivities.php",
        data: { q: nets },
        success: function(response) {
          var thelist = "#" + nets + "<br>" + response + "<br><br>";
          $("#subNets").append(thelist);
        },
        error: function() {
          alert("Sorry no nets.");
        },
      });
    });
  });
});

Answer 2

Define your nets variable like this and it should work

let nets = netnos[i];