Same data adds twice to JavaScript table instead of adding two different things to the table-CodePudding

I have a program that pulls from an API and displays the results on a table. What should be happening is that each row should be different data. However, when this runs, it adds the data with the ID of 4 twice, completely skipping over the data with the ID of 3. At first, I thought I must've goofed something up with the GET requests. I went to check, and turns out it is getting the data, but not adding it to the table. I moved all of the code to add to the table inside of the for loop, but the same problem happened. If it's any use, I'm using Tomcat to handle the API.

Attached is the function I use to add rows to the table.

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();
                }
                
            }   ```

CodePudding user response：

Looks like Andreas is right.
Try const ajaxRequest = ... instead of var ajaxRequest = ....

It's hard for me to explain in detail what is happening here. My guess is the following:
As said above, you use the same ajaxRequest, as if it would be declared before the for loop.
Secondly, as the request is async, it gets sent from the event loop after the main thread code is completed. Which means it sends the request to id = 4 two times.

Still I can be mistaken in the details (and please correct me if I'm wrong), but changing var to const should help. Have you tried it?