how to access the url inside .success of the $http.get method in angularjs

Question

I have the following controller

var app = angular.module('callapp', []);
app.controller('eController', function($scope, $http, $log) {
    $scope.urlString = []; //this is filled with values

    for( var i=0; i<3; ++i)
    {
        var currentURL = $scope.urlString[i];
        $http.get(currentURL)
        .success( function(response) {
            //how do I access currentURL here?
            $log.info(this.currURL) //this is printing "undefined"
        });
    }

The urls are generated dynamically, and I have to get data from these urls. The urls are generated before the for loop executes (and the url requests are asynchronous).

I tried $.ajax(currentURL) instead of $http.get method, but I got the same result - "undefined".

Is there any way I can access the currentURL and the current value of 'i' inside the .success(function ())?

when $.ajax(currentURL) is used, note that you have to use "this.url" to access the currentURL. It does not work if you use "this.currentURL" — akashrajkn, Jun 03 '15 at 15:23

score 2 · Accepted Answer · edited May 23 '17 at 11:53

currentUrl is easily accessible, and since you're making AJAX requests inside a for loop, you will always get i to be the last index value because the renderer will print the value when the AJAX req gives 200 which will take some time and within that time for loop would have executed, so always the last index value will be there in i. For this, you have to use IIFE

For the purpose of Demo, I'm using a Fake Online REST API - http://jsonplaceholder.typicode.com/

RUNNING DEMO: http://plnkr.co/edit/djPMu4UH9t9BeGwBcUMI

HTML:

<body ng-app="callapp" ng-controller="eController">
</body>

JS:

var app = angular.module('callapp', []);
app.controller('eController', function($scope, $http, $log) {
    $scope.baseUrl = "http://jsonplaceholder.typicode.com/posts/";
    $scope.urlString = [
      $scope.baseUrl + '1',
      $scope.baseUrl +'2',
      $scope.baseUrl + '3'
    ]; //this is filled with values


    for( var i=0; i<3; ++i) {
       (function(index) {
        var currentURL = $scope.urlString[i];
        $http.get(currentURL)
        .success( function(response) {
            $log.info(index+1, currentURL);
        });
      })(i);
    }
});

app.$inject = ['$scope', '$http', '$log'];

the solution is working perfectly, but i didn't get why > app.$inject < is used explicitly — clearScreen, May 29 '15 at 05:23
To allow the minifiers to rename the function parameters and still be able to inject the right services, the function needs to be annotated with the $inject property. The $inject property is an array of service names to inject. https://docs.angularjs.org/guide/di — softvar, May 29 '15 at 08:34

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You can register an HttpInterceptor. In the interceptor it's possible to catch/handle all requests.

More info at: https://docs.angularjs.org/api/ng/service/$http#interceptors

$provide.factory('myHttpInterceptor', function($q) {
  return {
     // optional method
     'request': function(config) {
       // This is your URL:
       console.log(config.url);
       return config;
     },
  };
});

Don't forget to register the httpInterceptor like this: $httpProvider.interceptors.push('myHttpInterceptor');

Shubham Nigam · Answer 3 · 2015-05-28T12:39:22.673

0

store value in $scope variable because this.currUrl is undefined

 var app = angular.module('callapp', []);
    app.controller('eController', function($scope, $http, $log) {
        $scope.urlString = []; //this is filled with values

        for( var i=0; i<3; ++i)
        {
            $scope.currentURL = $scope.urlString[i];
            $http.get($scope.currentURL)
            .success( function(response) {
                //how do I access currentURL here?

            });
 $log.info($scope.currentURL);
        }

edited May 28 '15 at 12:39

answered May 28 '15 at 12:21

Shubham Nigam

3,844
19
32

This doesn't work since the calls are asynchronous and if the back-end data return is slow, the for loop finishes executing. So $scope.currentURL is set to $scope.urlString[2] in all the three .success(function()) callbacks – clearScreen May 28 '15 at 12:32
I have edited the answer now if calls are aysnc then also it will give values – Shubham Nigam May 28 '15 at 12:40

score 0 · Answer 4 · answered Jun 04 '17 at 06:56

Instead of using for loop use angular forEach .For more information on angularForeach visit https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=control

var app = angular.module('callapp', []);
app.controller('eController', function($scope, $http, $log) {
$scope.baseUrl = "http://jsonplaceholder.typicode.com/posts/";
$scope.urlString = [$scope.baseUrl + '1', $scope.baseUrl +'2',$scope.baseUrl + '3']; //this is filled with values

angular.forEach($scope.urlString,function(value,key){

    $http.get(value)
    .success( function(response) {
        $log.info(value) 
    });
}    
});

app.$inject = ['$scope', '$http', '$log'];

how to access the url inside .success of the $http.get method in angularjs

4 Answers4