How to use $scope in $http url

Question

When I log the id it shows me the correct id. I want to pass this id in the second url and fetch data accordingly.

Like when the id is 9 and when i put it like this url: &room_type=9&day=1 it works but not when I use it this way url: '&room_type=' +$scope.id + '&day=1'

        $http({
            method:'GET',
            url: '&hotel_id=' +$scope.current_Hotel.hotel_id
        }).then(function(response){
            var roomdata = response.data;
            $scope.roomdata = roomdata;
            var roomtype = roomdata.data;
            angular.forEach(roomtype, function(value, key){
                var id = value.room_type_id;
                $scope.id = id;
                console.info(id);
            });
        });

        $http({
            method:'GET',
            url: '&room_type=' +$scope.id + '&day=1'
        }).then(function(response){
            var plan = response.data;
            $scope.plan = plan;
        });

Igor · Accepted Answer · 2017-03-18 11:57:22Z

Its because the way async programming works in javascript. In your code you are calling these 2 http calls back to back and the defined callback (then) does not fire until later when you get a result. So id will not be populated at the time your 2nd http call is fired. If you want to call this with id and id is defined in the callback of your 1st call then you have to call it from inside the callback of your first http call, not after it.

Here is how you could handle it

$http({
    method:'GET',
    url: '&hotel_id=' +$scope.current_Hotel.hotel_id
}).then(function(response){
    var roomdata = response.data;
    $scope.roomdata = roomdata;
    var roomtype = roomdata.data;
    angular.forEach(roomtype, function(value, key){
        var id = value.room_type_id;
        $scope.id = id;
        console.info(id);
    });

    // call http now that id is defined
    $http({
        method:'GET',
        url: '&room_type=' +$scope.id + '&day=1'
    }).then(function(response2){
        var plan = response2.data;
        $scope.plan = plan;
    });
});

Sajeetharan · Accepted Answer · 2017-03-18 12:02:05Z

2

Http request you make works async, use promise chains to call the request after another

function getHotelId(){
    return $http({
      method:'GET',
      url: '&hotel_id=' +$scope.current_Hotel.hotel_id
    })
}

function getPlan(){
   return $http({
       method:'GET',
       url: '&room_type=' +$scope.id + '&day=1',
   })
}
$scope.processform = function() {
     getHotelId()
       .then( function( response )
        {
            var roomdata = response.data;
            $scope.roomdata = roomdata;
            var roomtype = roomdata.data;
            angular.forEach(roomtype, function(value, key){
                var id = value.room_type_id;
                $scope.id = id;
                console.info(id);
            });
            return getPlan();
        })
        .then(function(response){
           console.log(response.data);
        })

}

answered Mar 18, 2017 at 12:02

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

DevelopmentIsMyPassion Over a year ago

this is more better way to do

Collectives™ on Stack Overflow

How to use $scope in $http url

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related