Question

I am currently linking a javascript file to an html page, and upon using a function in that javascript file the return value essentially gets erased and shows up as undefined, even though in the function itself the value is defined (that was probably very confusing, i’ll just show the code and it should make sense):

functions.js

function addActivity(contactNameSelected, username) {   
var returnArray = [];
//post to .php
        if(data.added)
        {
            var newEvent = [];
            newEvent['id'] = data.id;
            newEvent['date'] = formattedDate;
            returnArray.push(true);
            returnArray.push(newEvent);
            return returnArray; //when i debug, this has a value and is a valid array at this point
        }
        else
        {
            returnArray.push(false);
            returnArray.push(data.message); //when i debug, this has a value and is a valid array at this point
            return returnArray;
       }
    }

home.html

var response = [];
response = addActivity(contactNameSelected, username); //although valid above, undefined here
if(response[0]) //error b/c response is undefined
{
    //do stuff if successful 
}
else{
    //do other stuff if unsuccessful
}

If i just return a string it works fine, but for some reason if i attempt to return an array it is simply undefined. Why is this?

Thanks!

Answer 1

I’m guessing that the omitted ‘//post to .php‘ looks something like

$.post('...php', { ... }, function(data) {
   if (data.added) ...

The AJAX response is handled by a callback function, which executes asynchronously. In other words, returnArray is populated well after addActivity has returned.

The return returnArray; statements are useless because you are returning a value from the callback, not from addActivity. The callback is invoked not by your code, but by XHR (in a different execution context) and its return value is discarded.

To properly pass your data back in asynchronous style, we need to tweak your code.

function addActivity(contactNameSelected, username, callback) {                           
    $.post('...', { ... }, function(data) {
        var returnArray=[];
        if(data.added)                        
        {                        
            ...
        }                        
        else                        
        {                        
            ...                      
        }
        callback(returnArray);
    });
}

 

addActivity(contactNameSelected, username, function(response) {
    if(response[0])
    {                                
        ...
    }                                
    else
    {                                
        ...
    }
});