Unexpected undefined return value from a function

Question

I'm getting an unexpected undefined return value from a function.

function createselbox(arr) {
    console.log('In createselbox');
    var startstr = `Something`;
    mytemp = '';
    for (var i = 0; i < arr.length; i++) {
        mytemp = mytemp + '<option>' + arr[i] + '</option>';
    }
    var ret = startstr + mytemp + `Something else    `;
    IsStaff = CheckifStaff();
    console.log('Checkifstaff is ' + IsStaff);
    if (IsStaff) {
        console.log('Got true createselbox');
        console.log('In sel loop');
        ret = startstr + mytemp + `Something more`;
    } else {
        console.log('Got false createselbox');
    }
    return ret;
}

function CheckifStaff() {
    var data = {
        "isstaff": 'check'
    };
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
        type: "POST",
        dataType: "html",
        url: "/functions/checkifstaff",
        data: data,
        success: function (data) {
            var recdata = data;
            if (recdata.indexOf('Has add permissions') != -1) {
                console.log('Returning true');
                return 1;
            } else {
                console.log('Returning false');
                return 0;
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log('An error occured in CheckifStaff');
            return 0;
        }
    });
}

The console shows:

In createselbox
appointment.js ? dev = 96168005 : 292 Checkifstaff is undefined
appointment.js ? dev = 96168005 : 305 Got false createselbox
appointment.js ? dev = 96168005 : 158 Returning true

createselbox is called first. But the value from the function is being returned as false, apparently even before the function execution.

Why is this happening?

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) You are returning to the `$.ajax` function, not returning something from CheckiStaff itself — Luca Kiebel, Aug 04 '18 at 11:06
Is your question answered? If so, why haven't you picked an answer yet? If not, why haven't you commented accordingly? — connexo, Aug 11 '18 at 07:00

score 1 · Accepted Answer · answered Aug 04 '18 at 11:09

1

CheckifStaff() has no explicit return statement, so it returns what all functions return by default, which is undefined.

answered Aug 04 '18 at 11:09

connexo

53,704
14
91
128

score 1 · Answer 2 · answered Aug 04 '18 at 11:49

To make this work, CheckiStaff needs to return something, here, for example CheckiStaff will return a Promise which's value is either 1 or 0. createselbox will now await CheckiStaff and then use the value it returns afterwards

async function createselbox(arr) {
    console.log('In createselbox');
    var startstr = `Something`;
    mytemp = '';
    for (var i = 0; i < arr.length; i++) {
        mytemp = mytemp + '<option>' + arr[i] + '</option>';
    }
    var ret = startstr + mytemp + `Something else    `;
    let IsStaff = await CheckiStaff();
    console.log('Checkifstaff is ' + IsStaff);
    if (IsStaff) {
        console.log('Got true createselbox');
        console.log('In sel loop');
        ret = startstr + mytemp + `Something more`;
    } else {
        console.log('Got false createselbox');
    }
    return ret;
}

function CheckifStaff() {
    var data = {
        "isstaff": 'check'
    };
    data = $(this).serialize() + "&" + $.param(data);
    return new Promise((resolve, reject) => {
      $.ajax({
        type: "POST",
        dataType: "html",
        url: "/functions/checkifstaff",
        data: data,
        success: function (data) {
            var recdata = data;
            if (recdata.indexOf('Has add permissions') != -1) {
                console.log('Returning true');
                resolve(1);
            } else {
                console.log('Returning false');
                resolve(0);
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log('An error occured in CheckifStaff');
            resolve(0);
        }
    });
    });
    
}

score 1 · Answer 3 · answered Aug 04 '18 at 11:58

you can also do change your ajax to be like this

 $.ajax({
    type: "POST",
    dataType: "html",
    url: "/functions/checkifstaff",
    data: data,
    success: function (data) {
        var recdata = data;
        if (recdata.indexOf('Has add permissions') != -1) {
            console.log('Returning true');
            return 1;
        } else {
            console.log('Returning false');
            return 0;
        }
    },
    error: function (xhr, textStatus, errorThrown) {
        console.log('An error occured in CheckifStaff');
        return 0;
    }
}).then(function(data){
   return data
});

score 0 · Answer 4 · answered Aug 04 '18 at 11:10

0

i'm not an expert, but i think when you use ajax you should wait for the response - use promise, or async/await func

answered Aug 04 '18 at 11:10

kamilmichna

11
2

Unexpected undefined return value from a function

4 Answers4