Returning an object with values, but values are undefined

Question

I have a function which creates an object from some stuff in a database. Ajax handles the request for data which is then parsed in to JSON format and fed in to the function. I do some checking (if statements and what not) and then return it to another area of the code.

However when returning it I can console.log()it and see that it is an Object { }

I click that object and get the variables shown in the dialog box (and it shows they have values attached to each property) but when trying to do a

result = alertFilled(type,mon,year,data.tableField);

console.log(result.table);

I get undefined

My function to handle and create the object is

function alertFilled (type,mon,year,tableField){
    var alertObj = {};

    $.ajax({
        method: 'POST',
        url: 'ajaxScripts/checkAlertFilled.php',
        data: {
            'type': type,
            'mon': mon,
            'year': year,
            'id': tableField,
            'ajax': true

        },
        // return appropriate message
        success: function (data)
        {
            var parsed = JSON.parse(data);

            alertObj.table = type;
            alertObj.tableField = tableField;
            alertObj.monthYear = parsed.mthYr;
            alertObj.month = "";
            alertObj.year = "";
            alertObj.echoFilled = false;
            alertObj.bravoFilled = false;

            var index = [];


            for (var x in parsed) {
                index.push(x);
            }

            alertObj.month = parsed[index[2]];
            alertObj.year = parsed[index[3]];

            var mthYrLower = parsed[index[0]].toString();
            if (mthYrLower.toLowerCase().indexOf("echo") >= 0){

                if ($.trim(parsed[index[1]]) !== "")
                {
                    alertObj.echoFilled = true;
                }
                else {
                    alertObj.echoFilled = false;
                }
            }
            if (mthYrLower.toLowerCase().indexOf("bravo") >= 0){

                if ($.trim(parsed[index[1]]) !== "")
                {
                    alertObj.bravoFilled = true;

                }
                else {
                    alertObj.bravoFilled = false;
                }
            }
            counter++;
        }
    });

    return alertObj;

}

checkAlertFilled.php Returns

type = "Table1" or "Table2"
tableField = "Column1" or "Column2" or "Column3"
monthYear = "JUL2016 ECHO" as an example
month = "JUL"
year = "2016"

and other variables

echoFilled = "true" or "false"
bravoFilled = "true" or "false"

Please write some code what you return in checkAlertFilled.php — Ronak Patel, Jul 27 '16 at 10:09

ZitRo · Answer 1 · 2016-07-27T16:27:17.503

0

What I see is that $.ajax is simply an asynchronous function, while return alertObj; is a synchronous return statement. An empty alertObj is returned immediately without being filled with new properties. You must redesign your code to use, for example, callback function. Example:

function alertFilled (callback, type, ...) {
    var alertObj = {};
    $.ajax({ ..., success: function (data) {
        // do all your stuff here
        callback(alertObj);
    }});
}

And usage:

alertFilled(function (data) {
    console.log(data);
}, ...);

edited Jul 27 '16 at 16:27

answered Jul 27 '16 at 10:18

ZitRo

1,163
15
24

I read the initial repsonse about it being a duplicate and can see you have provided a similar answer. However could you provide your answer in context of the code I submitted? – Dan W Jul 27 '16 at 10:35
@DanW, updated. I think you've already found an answer. – ZitRo Jul 27 '16 at 16:28

Returning an object with values, but values are undefined

1 Answers1