Performing an additional GET request using AngularJS

Question

Performing an additional GET request using AngularJS

After successfully running the code snippet, I received the JSON output displayed below. My main focus now is on extracting the cars_url. What would be the most effective method to retrieve the URL (and what approach is recommended), and subsequently initiate a secondary GET request?

JSON Output

{
    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 Function

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

javascript angularjs

Answer 1

Answer №1

app.controller("CampaignDataHandler" , ['$scope', 'RestangularService', 'CbgenRestangularService', '$http',
    function($scope, RestangularService, CbgenRestangularService, $http){

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

}]);

Nesting multiple requests can become complex; using $q to manage request flow is recommended in such scenarios.

app.controller("CampaignDataHandler" , ['$scope', 'RestangularService', 'CbgenRestangularService', '$http', '$q',
    function($scope, RestangularService, CbgenRestangularService, $http, $q){
    $scope.user = {cars_url:"your 404 url here"};

    var userCall = CbgenRestangularService.one('api/v1/user', "james").get();
    $q.when(userCall.then(
        function(user) {
            $scope.user = user;
            console.log(user);
        }
    ))
    .then(function(){
        var cars = $http({method: 'GET', url:$scope.user.cars_url);
        cars.then(function(data){
             // handle success response here
        }, function(data){
             // handle error response here
        });
    });
}]);

Answer 2

app.controller("CampaignDataHandler" , ['$scope', 'RestangularService', 'CbgenRestangularService', '$http',
    function($scope, RestangularService, CbgenRestangularService, $http){

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

}]);

Nesting multiple requests can become complex; using $q to manage request flow is recommended in such scenarios.

app.controller("CampaignDataHandler" , ['$scope', 'RestangularService', 'CbgenRestangularService', '$http', '$q',
    function($scope, RestangularService, CbgenRestangularService, $http, $q){
    $scope.user = {cars_url:"your 404 url here"};

    var userCall = CbgenRestangularService.one('api/v1/user', "james").get();
    $q.when(userCall.then(
        function(user) {
            $scope.user = user;
            console.log(user);
        }
    ))
    .then(function(){
        var cars = $http({method: 'GET', url:$scope.user.cars_url);
        cars.then(function(data){
             // handle success response here
        }, function(data){
             // handle error response here
        });
    });
}]);

Answer 3

Answer №2

If you're looking to trigger this function whenever $scope.person is updated (which typically occurs when the response from the person request comes in), one approach could be setting up a $watch in your controller.

$scope.$watch('person', function(newPerson, oldPerson){
    // Don't react to Angular's initial broadcast
    if(!newPerson){
        return false;
    }
    CbgenRestangular.one(newPerson.cars_url).get().then(function(data){
        // Handle cars data here
    });
});

Answer 4

If you're looking to trigger this function whenever $scope.person is updated (which typically occurs when the response from the person request comes in), one approach could be setting up a $watch in your controller.

$scope.$watch('person', function(newPerson, oldPerson){
    // Don't react to Angular's initial broadcast
    if(!newPerson){
        return false;
    }
    CbgenRestangular.one(newPerson.cars_url).get().then(function(data){
        // Handle cars data here
    });
});

Performing an additional GET request using AngularJS

Answer №1

Answer №2

Similar questions

What is an alternative method for invoking a child function within a parent component in React?

Master the art of adjusting chart width on angular-chart with the help of chart.js

Trouble with Vue: Sibling components unable to communicate

What is the process of generating a fresh JavaScript object using GWT JSNI?

What is the best way to store values from dynamically generated input fields into a single database column?

Unpredictable preset inline styles for HTML input elements

Hide the selection box when hovering over the Div

Is there a better method to accomplish this task in a more effective manner?

Tips for creating a page that submits itself

In Internet Explorer 9, the cursor unexpectedly moves up above the element

Optimal approach for incorporating AJAX/jQuery functionality to both append to a form and refresh a list simultaneously on a single webpage

Difficulty displaying a progress bar over an overlay

Can you iterate through each element that matches those in a different array?

Incorporating a full-page background into a specific view using AngularJS

Preventing AngularJs from Overriding VueJs Routes: Ensuring VueJs Routes Remain Uninterrupted

Failure to recognize AJAX content in .ready function

Polymerfire: Unable to locate a default bucket

The transformation of all relative URLs into absolute URLs is carried out

Leveraging the array for fetching JSON data

Issues arise with the functionality of custom jQuery sliders