CODEWITHSUNDEEP
javascriptarraysangularjs
PBandJ
PBandJ

Reputation: 2883

Returning the array before the function is complete & Angular JS

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);
        };
    });

Upvotes: 0

Views: 89

Answers (1)

IROEGBU
IROEGBU

Reputation: 948

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);
});

Upvotes: 2

Related Questions