Concatenation in jQuery Ajax Callback not executing?

I'm trying to build and attach table rows to an existing table with jQuery. With开发者_开发知识库in my row-building function I need to make another Ajax call based on the current value of theJSON.EmployeeID within the $.each loop.

The inner $.getJSON executes, retrieves valid JSON, and fires its callback, but the td containing data.Name does not get concatenated to trString! trString does not even receive empty td, it seems like that line simply doesn't get executed. Am I missing something obvious, or am I misusing $.getJSON, or what?

//This call succeeds and returns valid JSON
$.getJSON("ajax/queries.php?q=licenseMain&oId=" + oId + "&sId=" + sId + "&eId=" + eId + "&inUse=" + inUse + "&page=1", function (licensedata) {
    buildLicenseTable(licensedata);
});

function buildLicenseTable(trArray) { //Build table row-by-row

    var trString = "";

    $.each(JSONforTable, function (key, theJSON) { //Build single table row   
        trString += "<tr>";

        trString += "<td>" + theJSON.LicenseID + "</td>";
        trString += "<td>" + theJSON.LicenseNumber + "</td>";
        trString += "<td>" + theJSON.LicenseType + "</td>";

        //The inner $.getJSON call
        $.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function (data) {
            console.log("*---Callback executing!---*");
            trString += "<td>" + data.Name + "</td>"; //<----This line doesn't execute
        });

        trString += "</tr>";
        $("#bigtable > tbody:last").append(trString);
    });
}

Remember that ajax is asynchronous. Your buildLicenseTable function has already returned once your ajax fires and returns. You have some options:

1. Execute your ajax synchronously. Not recommended.

2. Restructure your methods to append all the data to an array, and do construction after the last ajax returns. The only problem with this method is that you aren't guaranteed the order in which these methods will return from the server.

3. Change your ajax methods to return all the data for this operation in ONE call instead of multiple. Much more efficient.

The problem is that the AJAX is async, so you're code is going to fire the request and continue on with the rest of the function. By the time the callback comes, the string has already been appended to the DOM. To solve it just change it to this

     $.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function(data){
          console.log("*---Callback executing!---*");
          trString += "<td>" + data.Name + "</td>";//<----This line doesn't execute

         trString += "</tr>";               
         $("#bigtable > tbody:last").append(trString);
     });

The following code will work for you

//This call succeeds and returns valid JSON
$.getJSON("ajax/queries.php?q=licenseMain&oId=" + oId + "&sId=" + sId + "&eId=" + eId + "&inUse=" + inUse + "&page=1", function(licensedata){
    buildLicenseTable(licensedata);
});

function buildLicenseTable(trArray){//Build table row-by-row

    var trString = "";  

    $.each(JSONforTable, function(key, theJSON){//Build single table row   
         trString += "<tr>";

         trString += "<td>" + theJSON.LicenseID + "</td>";
         trString += "<td>" + theJSON.LicenseNumber + "</td>";
         trString += "<td>" + theJSON.LicenseType + "</td>";

         //The inner $.getJSON call
         $.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function(data){
              console.log("*---Callback executing!---*");
              trString += "<td>" + data.Name + "</td>";//<----This line doesn't execute

               trString += "</tr>";               
                $("#bigtable > tbody:last").append(trString);
         });
    });
}

As others have pointed out, your troubles are because ajax is async, and returns immediately after calling getJSON without waiting for a response. We just put the code where you append data to the table in a callback function