Question

I’m using the JIT and making a spacetree, but the data the server returns isn’t in the proper format, so I figured it would be easiest to just build a string that IS the right format and then parse that with eval (which works fine). The problem now comes in that I need to use another string of JSON that isn’t in the right format to add children nodes to the space tree, and I now have no idea what I’m doing. Here’s my code:

function grabdata(empid, fname, lname){
    var json = ''; 
    jQuery.getJSON('../../Mobile_ReportingChain.cfm?Empid='+empid, function(data) {
        console.log(data);
        for(var i=data.DATA.length-1; i>=0; i--){
            json = json + 'id: "' + data.DATA[i][3] + '",name: "' + data.DATA[i][0] + ' ' + data.DATA[i][1] + '",data: {},children: [{';
        }
        json = json + 'id: "' + empid + '",name: "' + fname + ' ' + lname + '",data: {},children: [';
        alert("JSON 1: " + json);
        jQuery.getJSON('../../Mobile_Subordinate.cfm?Empid='+empid, function(data2) { 
            console.log(data2);
            for(var i=0; i<data2.DATA.length; i++){
                json = json + '{id: "' + data2.DATA[i][4] + '",name: "' + data2.DATA[i][0] + ' ' + data2.DATA[i][1] + '",data: {},children: []},';
            }
            alert("JSON 2: " + json);
        });
        json = json + ']';
        for(var i=data.DATA.length; i>0; i--){
            json = json + '}]';
        }
        alert("JSON 3: " + json);
    });
}

Here’s what I’m getting from the alerts, and what my goal is:

JSON 1: id: "000-25-9687",name: "NAME1          LNAME1                  ",data: {},children: [{id: "000-91-3619",name: "FNAME2            LNAME2                  ",data: {},children: [{id: "000-01-2302",name: "FNAME3            LNAME3                    ",data: {},children: [{id: "000-14-7189",name: "FNAME4           LNAME4                  ",data: {},children: [{id: "000-62-7276",name: "FNAME5 LNAME5",data: {},children: [

JSON 2: id: "000-25-9687",name: "NAME1          LNAME1                  ",data: {},children: [{id: "000-91-3619",name: "FNAME2            LNAME2                  ",data: {},children: [{id: "000-01-2302",name: "FNAME3            LNAME3                    ",data: {},children: [{id: "000-14-7189",name: "FNAME4           LNAME4                  ",data: {},children: [{id: "000-62-7276",name: "FNAME5 LNAME5",data: {},children: []}]}]}]}]{id: "000-21-6506     ",name: "CHILD1          CHILDLNAME1                    ",data: {},children: []},{id: "000-17-7989     ",name: "CHILD2          CHILDLNAME2                   ",data: {},children: []},{id: "000-23-6712     ",name: "CHILD3        CHILDLNAME3              ",data: {},children: []},

JSON 3: id: "000-25-9687",name: "NAME1          LNAME1                  ",data: {},children: [{id: "000-91-3619",name: "FNAME2            LNAME2                  ",data: {},children: [{id: "000-01-2302",name: "FNAME3            LNAME3                    ",data: {},children: [{id: "000-14-7189",name: "FNAME4           LNAME4                  ",data: {},children: [{id: "000-62-7276",name: "FNAME5 LNAME5",data: {},children: []}]}]}]}]

JSON 4: id: "000-25-9687",name: "NAME1          LNAME1                  ",data: {},children: [{id: "000-91-3619",name: "FNAME2            LNAME2                  ",data: {},children: [{id: "000-01-2302",name: "FNAME3            LNAME3                    ",data: {},children: [{id: "000-14-7189",name: "FNAME4           LNAME4                  ",data: {},children: [{id: "000-62-7276",name: "FNAME5 LNAME5",data: {},children: [{id: "000-21-6506     ",name: "CHILD1          CHILDLNAME1                    ",data: {},children: []},{id: "000-17-7989     ",name: "CHILD2          CHILDLNAME2                   ",data: {},children: []},{id: "000-23-6712     ",name: "CHILD3        CHILDLNAME3              ",data: {},children: []},]}]}]}]}]

Obviously it’s moving on past and doing what makes the JSON3 alert before it has time to grab and build the JSON2 alert. How do I make it stop and wait for that getJSON call to finish and the success function to finish before it goes on?

Answer 1

As a general rule, if you’re making an asynchronous call (like jQuery.getJSON), anything in the script after that call is going to be executed before the asynchronous call completes.

If you want to keep things crsytal clear, you can write your code like this:

function grabdata(empid, fname, lname){
    jQuery.getJSON('../../Mobile_ReportingChain.cfm?Empid='+empid, function(data) {
        jQuery.getJSON('../../Mobile_Subordinate.cfm?Empid='+empid, function(data2) { 

            // DO ALL YOUR STUFF WITH data AND data2 HERE

        });
    });
}

It’s not optimal, but it’s clear that both AJAX calls must complete before the code in the innermost block will execute.

---

If you’re looking as more advanced handling of multiple concurrent ajax requests, you can create a promise that executes on the completion of two asynce requests with jQuery.when().

Here’s an example:

$.when(
    $.getJSON('../../Mobile_ReportingChain.cfm?Empid='+empid),
    $.getJSON('../../Mobile_Subordinate.cfm?Empid='+empid)
).done(function (data, data2){

            // DO ALL YOUR STUFF WITH data AND data2 HERE

});