JS Function including AJAX returning undefined

Question

function idToUnitNum(id){
    $.ajax({  
        type: "POST",  
        url: "ajax_officerFromId.php",
        data: {'id': id},
        success: function(dataString) {
            ofd = JSON.parse(dataString);
            var result = ofd.data;
            console.log(result);
            return result;
        }
    });
}

This is the function. It's called from another function. I tried testing it's output by logging result before it returns, and it displays the appropriate result.

Result (JSON):

{"success":"true","time":1524462577,"data":"ADMIN"}

However, when I try catching the variable (a string), it does shows as "undefined".

It's probably a stupid mistake.

Calling the function:

var unitnum = idToUnitNum(adata.arresting_officer);
console.log(unitnum);

Thank you for your assistance!

@prakashtank edited to include `dataString` (the AJAX result) — Ethan, Apr 23 '18 at 05:51
@JerrySmithHF : please check this link : https://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript include : `dataType: 'json',` in your ajax call and remove parsing and then check — prakash tank, Apr 23 '18 at 06:02

score 0 · Answer 1 · answered Apr 23 '18 at 05:58

pass callback function to idToUnitNum. something like below

function idToUnitNum(id,callback){
$.ajax({  
    type: "POST",  
    url: "ajax_officerFromId.php",
    data: {'id': id},
    success: function(dataString) {
        ofd = JSON.parse(dataString);
        var result = ofd.data;
        console.log(result);
        callback(result);
    }
});

}

score 0 · Answer 2 · answered Apr 23 '18 at 05:59

Hi Please change the AJAX function like this :

function idToUnitNum(id){
var dfd = $.Deferred();
$.ajax({  
    type: "POST",  
    url: "ajax_officerFromId.php",
    data: {'id': id},
    success: function(dataString) {
        ofd = JSON.parse(dataString);
        var result = ofd.data;
         dfd.resolve(result);
       // return result;
    }
});
 return dfd.promise();
}

And you can use this function like this

idToUnitNum(adata.arresting_officer).done(function(response){
   console.log(response);
});

FYI : not tested code

score 0 · Accepted Answer · answered Apr 23 '18 at 05:59

0

function idToUnitNum(id){
    var result = '';
    $.ajax({  
        type: "POST",  
        url: "ajax_officerFromId.php",
        async: false,
        data: {'id': id},
        success: function(dataString) {
            ofd = JSON.parse(dataString);
            result = ofd.data;

        }
    });
return result;
}

Thank you to whoever suggested I turn off async and call it outside fo the AJAX request. Solved the issue.

answered Apr 23 '18 at 05:59

Ethan

42
1
6

Don’t disable async. This will block the rest of your code, which provide a terrible user experience. It’s async by default for a good reason – Duncan Lukkenaer Apr 23 '18 at 06:06

score 0 · Answer 4 · answered Apr 23 '18 at 06:02

0

You should either use a callback function as a parameter or, even better, use promises. Simply put return in front of your ajax call and call .then() on the return value to read the result when it is available.

This has been asked many times, so you shouldn’t have any trouble finding more information about these solutions

answered Apr 23 '18 at 06:02

Duncan Lukkenaer

12,050
13
64
97

Also check out this answer: https://stackoverflow.com/a/5316805/4136777 – Duncan Lukkenaer Apr 23 '18 at 06:11

JS Function including AJAX returning undefined

4 Answers4