有人可以解释我的JavaScript函数中发生的事情吗？

Question

So i've got some ajax calls happening. The first getJson one returns an json object which i name "tables" its structured as tables['tables'] lists the name of tables in a database. key1 represents each table name. So i specifically loop through each table. I'm testing stuff out so when the table name is specifically "interfaces" (see if statements) then i want to execute another ajax request to retrieve the data from that table itself.

Its weird because the console.log(key1) does spit out if key1 == "Intefaces", however, my second console.log(key1) doesnt spit out on interfaces. It spits out on "vlan" which is the last table in my database.

Despite this my items array fills with the correct data from interfaces.

I dont understand why once i get into my second getJson statement, the val of key1 changes, especially when that function shouldnt even be accessible when key1 doesnt equal "Interfaces".

$.getJSON( "/ryan/nonEmber/getTables.php", function( data ) {
        tables = data;    
        for (var key1 in tables['tables']) {
              if (tables['tables'].hasOwnProperty(key1)) {
                console.log(key1 + " -> " + tables['tables'][key1]);
                if(key1 == 'Interfaces'){
                    console.log(key1);
                    $.getJSON("/ryan/nonEmber/getJson.php?table=" + key1, function( data2 ){
                        var items = [];
                        $.each(data2.post, function(key, val){
                              items.push(val);
                        });
                        console.log(key1);
                        for(i = 0; i < items.length; i++){
                            var myString = '<tr id = "visibleRow">';
                            for(j = 0; j < tables['tables'][key1].length; j++){
                                myString = myString + '<td id = "visibleDef">' + items[i][tables['tables'][key1][j]] +'</td>';
                                }
                            myString = myString + '</tr>';
                            Interfaces.push(myString);
                        }
                    }); 
                }
              }
        }
});

You'll probably my problem lies in my ajax. Which it probably is, but i've written ajax functions that depend on other ajax functions in the past and they've worked correctly. In fact, this function that i showed here was replacing another one that invovled 3 ajax calls. I just was trying to shorten it.

Can anybody explain whats happening here?

Answer 1

Ajax is asynchronous.

Your loop triggers the Ajax request.

The function you pass to getJSON is an event handler that runs when the HTTP response is received.

None of the responses are received until the loop that repeatedly calls getJSON is finished, by which time the value is the last one.

See How to generate event handlers with loop in Javascript? for the work around.