Returning something from a function that has a callback function

Question

Nothing is being return from my function because it is asynchronous. How do I return the viallages?

function getVillages() {
    var self = this;
    this.a = [];
    VCare.VCareWebService.getFacilitiesForUser({cache:false,
        callback:function(xml) { // invoke the service
            // use jQuery to extract information we are interested in
            console.log(xml);
            var village = xml.getElementsByTagName("VCVillage");
            for (i=0;i<village.length;i++) { 
                self.a.push(village[i].getElementsByTagName("description")[0].childNodes[0].nodeValue); // Uncaught TypeError: Cannot call method 'push' of undefined 
                console.log(village[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
            }

        }
   });
    console.log(self.a);
    //return(allVillages);
}

New attempt at making a village object and giving it an allVillages attribute and updating it:

function Villages() {
    this.allVillages = [];
}

function getVillages(village1) {
    VCare.VCareWebService.getFacilitiesForUser({cache:false,
        callback:function(xml, village1) { // invoke the service
            // use jQuery to extract information we are interested in
            console.log(xml);
            var village = xml.getElementsByTagName("VCVillage");
            for (i=0;i<village.length;i++) { 
                village1.allVillages.push(village[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
                console.log(village[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
            }
            if(typeof callback === "function") callback(xml);
        }
   });
    //return(allVillages);
}

function addVillages() {

village = new Villages();
console.log(village); //Villages {allVillages: Array[0]}

getVillages(village);
console.log(village.allVillages); //[]
for (i=0; i < data; i++) {
    console.log(data[i]);
    console.log(data[i][1]);
}

}

I get Uncaught TypeError: Cannot call method 'push' of undefined as village1 seems to be undefined. But I do pass it a correct Villages object

Your array is console logging before the function is completed is why. — Sleep Deprived Bulbasaur, Aug 11 '14 at 21:06
@MelanciaUK I need to return the array from the getVillages function. I don't think it gets returned when it is returning form within the callback function. — btf217, Aug 11 '14 at 21:08
The point is, is this service running asynchronously? Like using AJAX to get the data? If so, you need to return what do you want after the callback has finished. — emerson.marini, Aug 11 '14 at 21:10
When your code step into the console logging, the callback can be still working. — emerson.marini, Aug 11 '14 at 21:11
@MelanciaUK yes. Thanks. How do I do that? Because shifting the return up seems to not return anything — btf217, Aug 11 '14 at 21:12
You're logging something to the console within the _for loop_. If there's data coming, you can just return your array after the loop ends. — emerson.marini, Aug 11 '14 at 21:14
@MelanciaUK That returns nothing. Well, it returns the array, but it goes to nowhere, nothing can grab it. — btf217, Aug 11 '14 at 21:15
I see... I got your point. You can pass this array to another function just to return it then. — emerson.marini, Aug 11 '14 at 21:16
Check this out: http://stackoverflow.com/questions/20047163/how-to-get-return-value-in-a-function-with-inside-ajax-call-jquery — emerson.marini, Aug 11 '14 at 21:18
@MelanciaUK Thanks. I'm not really sure how to call it with mine as my callback is different syntax — btf217, Aug 11 '14 at 21:29
Have you tried something like this? http://jsfiddle.net/Lt44hy4u/1/ — emerson.marini, Aug 11 '14 at 21:51
@MelanciaUK Thanks. Is that calling the VCare method twice? It alerts saying too busy to perform method, It does that when it gets called too many times. — btf217, Aug 11 '14 at 21:58
Hard to say. I can't test it properly from here. Add some console logging points there. — emerson.marini, Aug 11 '14 at 22:10
It's a similar concept, but calling some other service (the one I can use in a jsFiddle): http://jsfiddle.net/Lt44hy4u/4/ — emerson.marini, Aug 11 '14 at 22:23
That's great. You can post the solution as your own answer and accept it then. — emerson.marini, Aug 11 '14 at 23:05

score 0 · Answer 1 · edited May 23 '17 at 11:49

Technique is found at this page How to get return value in a function with inside Ajax call - JQuery

This is the working code:

function getVillages(callback) {
         var data = [];
        VCare.VCareWebService.getFacilitiesForUser({cache:false,
            callback:function(xml) { // invoke the service
                // use jQuery to extract information we are interested in
                console.log(xml);
                var village = xml.getElementsByTagName("VCVillage");

                for (i=0; i<village.length; i++) {
                    data.push(village[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
                }

                if (typeof callback === "function") callback(data);            
            }
       });
    }

function addVillages() {
    var data = getVillages(function(data){
        for (i=0; i < data.length; i++) {
            //do whatever you want with the data
        }
    });
}

Returning something from a function that has a callback function

1 Answers1