CODEWITHSUNDEEP
javascriptangularjs
Prometheus
Prometheus

Reputation: 33655

Make a second get request in AngularJS

The following code works, and I get the JSON below returned. What I'm interested in is the cars_url. How can I get the URL (and what is the best way) then make a secondary get request?

JSON

{
    created: "2013-11-08T18:57:44",
    domain: "www.test.com",
    cars_url: "/api/v1/carlot/4",
    image: null,
    modified: "2013-11-08T18:57:44"
}

JavaScript

app.factory('CbgenRestangular', function(Restangular) {
    return Restangular.withConfig(function(RestangularConfigurer) {
        RestangularConfigurer.setBaseUrl('http://127.0.0.1:8000');
    });
});


app.controller("CampaignData" ,
               [
                   '$scope',
                   'Restangular',
                   'CbgenRestangular',
                   function($scope, Restangular, CbgenRestangular){
                       CbgenRestangular.one('api/v1/person', "james").get().then(
                           function(person) {
                               $scope.person = person;
                               console.log(person)
                           }
                       );
                   }
               ]);

Upvotes: 0

Views: 122

Answers (2)

nordyke
nordyke

Reputation: 113

If you want to do it any time $scope.person changes (which happens in the response from the person request), you could set up a $watch in your controller.

$scope.$watch('person', function(newPerson, oldPerson){
    // Ignore Angular's initial broadcast
    if(!newPerson){
        return false;
    }
    CbgenRestangular.one(newPerson.cars_url).get().then(function(data){
        // Deal with cars data
    });
});

Upvotes: 1

MBielski
MBielski

Reputation: 6620

app.controller("CampaignData" , ['$scope', 'Restangular', 'CbgenRestangular', '$http',
    function($scope, Restangular, CbgenRestangular, $http){

        CbgenRestangular.one('api/v1/person', "james").get().then(function(person) {
                $scope.person = person;
                console.log(person);
                var cars = $http({method: 'GET', url:person.cars_url);
                cars.then(function(data){
                     // do success things here
                }, function(data){
                     /do error things here
                });
            }
        );

}]);

Nesting the requests can get messy if you have more than one level deep. In that case, you should use $q to control the flow of the requests.

app.controller("CampaignData" , ['$scope', 'Restangular', 'CbgenRestangular', '$http', '$q',
    function($scope, Restangular, CbgenRestangular, $http, $q){
    $scope.person = {cars_url:"your 404 url here"};

    var personcall = CbgenRestangular.one('api/v1/person', "james").get();
    $q.when(personcall.then(
        function(person) {
            $scope.person = person;
            console.log(person);
        }
    ))
    .then(function(){
        var cars = $http({method: 'GET', url:$scope.person.cars_url);
        cars.then(function(data){
             // do success things here
        }, function(data){
             /do error things here
        });
    });
}]);

Upvotes: 1

Related Questions