Synchronize multiple $http response in angularjs

Question

Simply i need call an API to get response of user addresses and corresponding to each address i have to call google API to get the longitude and latitude.
I have tried too much and about all methods but at last my i am still looking to my empty hands.
please help me figure out where i am wrong.

app.controller('myController', function($scope, $rootScope, $http,$q){

$scope.myGeoKey="AIzaSyCqoOf_Kx5wzrYh3ioxFQ_xyz";

// FIRST API REQUEST
var url="http://xyz/abc?origin=noida";
$http.get(url, {
        headers:{'Content-Type': 'application/json'}
}).
then(function(data, status, headers, config) {

    // response is like
    /*
       [
            {
                "address":"Sector 64, Noida",
                "state": "Uttar Pradesh"
            },
            {
                "address":"Sector 62, Noida",
                "state": "Uttar Pradesh"
            },
            {
                "address":"CP, New Delhi",
                "state": "Delhi"
            }
        ]
    */

    var synchronizeData = [];
    var asynchronizeData = [];

    for (var key in data.data.response){

        var rawAddress=data.data.response[key].address+", "+data.data.response[key].state;
        var geoUrl="?address="+rawAddress+"&key="+$scope.myGeoKey;

        // GET LATITUDE AND LONGITUDE FOR EACH API RESPONSE

        $http.get("https://maps.googleapis.com/maps/api/geocode/json"+geoUrl).
        then(function(data, status, headers, config) {

            if(data.data.status=="OK") {
                var geometry=data.data.results[0].geometry.location;

                var latlng={
                    "lat": geometry.lat,
                    "long": geometry.lng
                }
                asynchronizeData.push(latlng);
            }

        });
    }

    // console.log(asynchronizeData) // WORKING TILL HERE

    $q.all(asynchronizeData).then(function(response){

        // console.log(response) // THIS IS NOT WORKING

        for (var i=0,len = response.length;i<len;++i){
            synchronizeData.push(response[i]);
        }
        $scope.synchronized = synchronizeData;

        console.log($scope.synchronized); // FINAL OUTPUT NOT WORKING

    });
});
});

Please Please..
Thanks

Sphinx117 · Accepted Answer · 2017-01-22 02:45:48Z

0

.all() need array of promises as param (or hash of promises). And you pass an array of literal objects!

Read the doc about $q

I am really not sure about that but, try to push all your second http call (the looped one) in your asyncArray. Then tell us what is happen in your .all() function.

Because each $http Will return a promise, so you stack promises in your array, so you can .all().

edited Jan 22, 2017 at 2:45

answered Jan 22, 2017 at 2:31

Sphinx117

971 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

Synchronize multiple $http response in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related