Javascript undefined variable because of AJAX GET request

Question

I have the following function. When I try to log the varible, it gives me undefined. I think it's because of the loading time from the AJAX GET call, but I don't know how to fix it.

EDIT: Yes, all the values are correct. The console.log logs the correct value, so everything within the function works. It's just the return that does not work.

Any ideas?

function loadOnderhoud() {  
    var username = window.sessionStorage.getItem("huidigeGebruiker");
    var url = "restservices/gebruiker?Q1=" + username;
        $.ajax({
            url : url,
            method : "GET",
            beforeSend : function(xhr) {
                var token = window.sessionStorage.getItem("sessionToken");
                xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            },
            success : function(data) {
                var onderhoud;

                $(data).each(function (index) {
                    if (this.geslacht == "m"){
                        onderhoud = (66 + (13.7 * this.gewicht) + (5 * (this.lengte*100)) - (6.8 * this.leeftijd)) * this.activiteit;
                    }
                    else if (this.geslacht == "v"){
                        onderhoud = (655 + (9.6 * this.gewicht) + (1.8 * (this.lengte*100)) - (4.7 * this.leeftijd)) * this.activiteit;
                    }
                    });
                console.log(onderhoud);
                return onderhoud;
            },
        });
}


function loadAdviezen(){
    var onderhoud = loadOnderhoud();
}

@SabirAmeen Yes, it is succesful beacuse it does log. And it returns a double. All the values are correct, the function works. — Some Name, Jun 15 '17 at 12:06
Could the #SO team add an *top duplicates for javascript* into the duplicate section? — Jonas Wilms, Jun 15 '17 at 12:06

Vivek Doshi · Accepted Answer · 2017-06-15T12:30:18.207

1

Issue is related to return from success function of ajax,

Proper way of doing is Provide the call back function:

function loadOnderhoud(getData) {  
    var username = window.sessionStorage.getItem("huidigeGebruiker");
    var url = "restservices/gebruiker?Q1=" + username;
        $.ajax({
            url : url,
            method : "GET",
            beforeSend : function(xhr) {
                var token = window.sessionStorage.getItem("sessionToken");
                xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            },
            success : function(data) {
                var onderhoud;

                $(data).each(function (index) {
                    if (this.geslacht == "m"){
                        onderhoud = (66 + (13.7 * this.gewicht) + (5 * (this.lengte*100)) - (6.8 * this.leeftijd)) * this.activiteit;
                    }
                    else if (this.geslacht == "v"){
                        onderhoud = (655 + (9.6 * this.gewicht) + (1.8 * (this.lengte*100)) - (4.7 * this.leeftijd)) * this.activiteit;
                    }
                    });
                console.log(onderhoud);
                getData(onderhoud);
            },
        });
}

function getData(data)
{
    var onderhoud = data;
}
loadOnderhoud(getData);

edited Jun 15 '17 at 12:30

answered Jun 15 '17 at 12:10

Vivek Doshi

56,649
12
110
122

The async false does not work, I'll try your second suggestion. – Some Name Jun 15 '17 at 12:13
@Liam , yes I got your point answer was posted by mistake I was adding the second way also , my mistake :) – Vivek Doshi Jun 15 '17 at 12:14
1

OKay I am removing it. – Vivek Doshi Jun 15 '17 at 12:17
Uncaught ReferenceError: getData is not defined – Some Name Jun 15 '17 at 12:23
Do you have live demo ? or plunker ? – Vivek Doshi Jun 15 '17 at 12:29
@SomeName, just forgot to add function before getData , please try now – Vivek Doshi Jun 15 '17 at 12:30
Thank you! Works like a charm. – Some Name Jun 15 '17 at 12:34
Do you know how I would go about having 2 callbacks into 1 function? I have a function loadMacro() just like loadAdviezen(). I need both results in one function. – Some Name Jun 15 '17 at 12:44
yes you can also pass 2 callbacks , same as getData , pass it as 2 parameters – Vivek Doshi Jun 15 '17 at 12:45
I did that, but it gives me 4 results now. var1 + undefined and also var2+undefined. function getData(data, dataa) { var onderhoud = data; var macro = dataa; console.log(onderhoud, macro); } loadOnderhoud(getData); loadMacro(getData); – Some Name Jun 15 '17 at 12:48
Post that also as different question , just let me know after that :) – Vivek Doshi Jun 15 '17 at 12:49
Thank you, edited the question. – Some Name Jun 15 '17 at 12:52
@SomeName , this is not how stackoverflow works man , please post different question for another query , your edit to the question makes answer invalid – Vivek Doshi Jun 15 '17 at 12:53
Can't post for another 30mins. I'll post it when I can. – Some Name Jun 15 '17 at 13:00
https://stackoverflow.com/questions/44570453/passing-2-callbacks-gives-undefined-as-result – Some Name Jun 15 '17 at 14:43

Javascript undefined variable because of AJAX GET request

1 Answers1