0

I have this simple function:

var t_devices = [
  ["192.168.1.60", "Central"],
  ["192.168.1.61", "Back"],
  ["192.168.1.62", "Right"],
  ["192.168.1.63", "Left"]
];

function drawCards() {
  for (var i = 0; i < t_devices.length; i++) {
    $.get("assets/t-div.html", function(data) {
      $('#t-container').append(data);
      $('#t-tile').html(t_devices[i][1]);
    });
  }
}

Upon execution I get an error:

Uncaught TypeError: Cannot read property '1' of undefined

It seems that I cannot read the variable t_devices in the $.get() function.

Ninad
  • 423
  • 2
  • 8
Fabio Marzocca
  • 1,573
  • 16
  • 36
  • 1
    The code you've shown works fine in isolation: https://jsfiddle.net/s4kvdfnu/. Are you sure it's this logic which is causing the problem? Are you also certain that `t_devices` is in the state you expect when the AJAX calls run? – Rory McCrossan Aug 01 '19 at 09:49
  • 4
    One other thing to note is that you're making the same AJAX request for every iteration of the loop, as you don't pass any data in the request. This is very wasteful and not good for performance or scalability. Make the request once then loop through `t_devices` as needed – Rory McCrossan Aug 01 '19 at 09:50
  • I need to display 4 divs, that's why I am iterating. The code is correct, but I canpt understand why t_devices is not accessible. Your fiddle is missing the get() – Fabio Marzocca Aug 01 '19 at 09:52
  • 2
    But why get the same file 4 times? – mplungjan Aug 01 '19 at 09:52
  • 1
    Looks to me that OP is loading a separate html component via AJAX and putting the iterated value in the innerHTML of an element. Which is still weird because in the second iteration OP would have more than one `#t-tile` – Abana Clara Aug 01 '19 at 09:52
  • @AbanaClara you're right and I will work on this, but the issue is happening at the first iteration and it is due to another problem. – Fabio Marzocca Aug 01 '19 at 09:58
  • 1
    I think problem is with loop counter `i`. Till the time get request ends `i` must be at `t_devices.length`, so it can not find element at that position. – Ninad Aug 01 '19 at 10:00
  • the problem is that first get callback is called after iteration is finished.... so your i is undefined. what you really doing in callback is t_devices[undefined] and this value is undefined. i am not sure, try to log your i in callback – Juraj Kocan Aug 01 '19 at 10:01
  • 1
    and as was already said. why not to just call ajax one time, and in finish callback do this iteration. so you wont call same get with same return value x times – Juraj Kocan Aug 01 '19 at 10:02
  • @JurajKocan, because I need to append the div 4 times in the page, by iterating the array. – Fabio Marzocca Aug 01 '19 at 10:03
  • 1
    Exactly, you need to iterate the array, but you don't need to make the AJAX request X times within that loop. – Rory McCrossan Aug 01 '19 at 10:04
  • @RoryMcCrossan, you're right. Let me try. – Fabio Marzocca Aug 01 '19 at 10:04
  • @JurajKocan and others: I edited the code as you suggested, by calling ajax one time and iterating inside the callback. It works! How can assign points for the answer? – Fabio Marzocca Aug 01 '19 at 10:10
  • 2
    you cant. since here is not answer only comments. and for you to understand. t_devices[i][1] "Cannot read property '1' of undefined". so you was able to read t_devices[i] but this value was undefined. becaose in time of call callback in ajax call for loop was already finished and there was no i variable – Juraj Kocan Aug 01 '19 at 10:19

0 Answers0