Returning the array before the function is complete & Angular JS

Question

I am trying to return the array 'self.results' with all the arrays pushed in, which is after the self.yelpResults is completed. I want to use the returned array in another function. For now, self.parsedYelpArray is suppose to accept that array.

I am having trouble getting the self.results return all the arrays that are being pushed in. Instead, it asynchronously push the original empty array into the self.parsedYelpArray function.

How do I resolve this?

This is the code in my controller:

self.MapRouteArray = CompileMapArray.compileRoutes(data);
self.yelpResults = CompileYelpResults.compileYelp(self.MapRouteArray);
self.parsedYelpArray = ParsingYelpResults.parsingData(self.yelpResults);

And, these are the relevant services:

 .service('CompileMapArray', function () {
        var self = this;
        self.MapRouteArray = [];
        self.compileRoutes = function (data) {
            for (var i = 0; i < data.response.route[0].leg[0].maneuver.length; i += 2) {
                self.MapRouteArray.push(data.response.route[0].leg[0].maneuver[i].position.latitude + ',' + data.response.route[0].leg[0].maneuver[i].position.longitude);
            }
            return self.MapRouteArray;
        };
    })

    .service('CompileYelpResults', function (YelpResource) {
        var self = this;
        self.results = [];

        self.compileYelp = function (mapArray) {
            for (var j = 0; j < mapArray.length; j++) {
                YelpResource.getListings({term: self.yelpSearch, ll: mapArray[0]}, function (response) {
                    self.results.push(response.businesses);
                            console.log(self.results);
                });
            }
            return self.results;
        };
    })

.service('ParsingYelpResults', function () {
        var self = this;
        self.parsingData = function (results) {
            console.log(results);
        };
    });

you can pass parsingData as a callback to compileYelp and use result in there. — IROEGBU
– IROEGBU, Commented Nov 24, 2015 at 6:06
I'm not that familiar with callback. Do you think you can explain it a little bit more? Thanks @iroegbu — PBandJ
– PBandJ, Commented Nov 24, 2015 at 19:59

IROEGBU · Accepted Answer · 2015-11-25 11:11:32Z

2

You are trying to return from an asynchronous function; you'll always get unreliable results from that, you need to pass in a callback function that handles whatever operation you want at the end of your async... Like:

.service('CompileYelpResults', function (YelpResource) {
    var self = this;
    self.results = [];

    self.compileYelp = function (mapArray, callbackFn) {
        for (var j = 0; j < mapArray.length; j++) {
            YelpResource.getListings({term: self.yelpSearch, ll: mapArray[0]}, function (response) {
                self.results.push(response.businesses);
                        console.log(self.results);
            });
        }
        callbackFn(self.results);
    };
});

Then call the function with a callback function like so:

var parsed = CompileYelpResults.compileYelp(self.MapRouteArray, function(result) {
    console.log(result);
});

This goes for all your asynchronous functions.

Relating to your comment the callback function you pass as second parameter to compileYelp takes the place of parsingData, so whatever processing you want to do with the results will be in the body of the callback function. It gives extra advantage in that you can use the results whichever way you like. For example.

var logged = CompileYelpResults.compileYelp(self.MapRouteArray, function(result) {
    console.log(result);
});

var stringified = CompileYelpResults.compileYelp(self.MapRouteArray, function(result) {
    JSON.stringify(result);
});

edited Nov 25, 2015 at 11:11

answered Nov 24, 2015 at 21:40

IROEGBU

95816 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PBandJ Over a year ago

Hi @iroegbu - Thanks for your response. This is very helpful. I'm a bit confused about the callbackFn. How is it defined in the self.compileYelp function? In the parsed variable, what is the callback function? The function(result) part? is the self.MapRouteArray still referring to the mapArray in the self.compileYelp function?

IROEGBU Over a year ago

See update, pass callbackFn as parameter to compileYelp. Then compileYelp calls callbackFn when results is ready. The callback should have the same function as your parsingData function.

PBandJ Over a year ago

Thanks so much @iroegbu! I finally figured got it to work. I had to set a timeout with the callback function, as the result was not returning on the first instance, but does so on the second and so forth turn.

Collectives™ on Stack Overflow

Returning the array before the function is complete & Angular JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related