Tengo un programa que extrae de una API y muestra los resultados en una tabla. Lo que debería estar sucediendo es que cada fila debería tener datos diferentes. Sin embargo, cuando esto se ejecuta, agrega los datos con la ID de 4 dos veces, omitiendo por completo los datos con la ID de 3. Al principio, pensé que debía haber cometido un error con las solicitudes GET. Fui a verificar y resulta que está obteniendo los datos, pero no los está agregando a la tabla. Moví todo el código para agregarlo a la tabla dentro del bucle for, pero ocurrió el mismo problema. Si sirve de algo, estoy usando Tomcat para manejar la API.

Se adjunta la función que uso para agregar filas a la tabla.

 function addRow(tableName, rowData) { for (var h = 0; h < rowData.length; h++) { var ajaxRequest = new XMLHttpRequest(); ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ if(ajaxRequest.status == 200){ let table = document.getElementById(tableName); let row = table.insertRow(1); var order = JSON.parse(ajaxRequest.responseText); var cell0 = row.insertCell(0); var cell1 = row.insertCell(1); var cell2 = row.insertCell(2); var cell3 = row.insertCell(3); var cell4 = row.insertCell(4); var cell5 = row.insertCell(5); var cell6 = row.insertCell(6); var cell7 = row.insertCell(7); var cell8 = row.insertCell(8); var cell9 = row.insertCell(9); var cell10 = row.insertCell(10); cell0.innerHTML = order.id; cell1.innerHTML = order.name; cell2.innerHTML = order.time; cell3.innerHTML = order.type; cell4.innerHTML = order.creamerAmount + " " + order.creamerType; cell5.innerHTML = order.sugarAmount; cell6.innerHTML = order.coffeeType; cell7.innerHTML = order.teaType; cell8.innerHTML = order.hotChocolateType; cell9.innerHTML = order.smoothieType; cell10.innerHTML = order.protein; } else { //I'm aware this is bad, not sure how to handle it otherwise though... h--; } } } ajaxRequest.open('GET', 'http://localhost:13760/cafe/cafe/orders/' + rowData[h]); ajaxRequest.send(); } } ```