How to pass a value to an AngularJS $http success callback

Question

In my AngularJS application I am doing the following

$http.get('/plugin/' + key + '/js').success(function (data) {
    if (data.length > 0) {
        console.log(data);
        // Here I would also need the value of 'key'
    }
});

Now I need to access the key value within the success callback, i.e. I need to know which value it had when the get() request has been made.

Any "best practice" how to do so?

PS: I can do the following, but is there a better way?

var key = config.url.split('/')[2];

Answer 1

Solution 1:

$scope.key = key;
$http.get('/plugin/' + key + '/js').success(function (data) {
    if (data.length > 0) {
        console.log(data, $scope.key);
    }
});

Solution 2 (Updated per Jim Hong's observation in his answer):

$http.get('/plugin/' + key + '/js').success((function(key) {
    return function(data) {
        console.log(key, data);
    }
})(key));

Answer 2

Reference to @geniuscarrier The working solution on my side is

$http.get('/plugin/' + key + '/js').success((function(key) {
    return function(data) {
        console.log(key, data);
    }
})(key));

Since using @geniuscarrier, I'l get

data undefined error

.

Answer 3

Technically speaking, this is not an AngularJS problem but a feature of javascript

first of all, functions that you defined inside a scope will have access to local variable and parameter of its parent scope

function parent(arg){
   var local
   function child(){
       // have access to arg and local
   }
}

Scope actually works well with the parent-child analogy: if you are the parent and you own a cookie, of cause you are welling to share it with your children...but if you are a kid...your cookie is your cookie, your parent is not allowed to touch it :). In other words, inner scope can access outer scope but it does not work both ways

So you should definitely be able to do:

$http.get('/plugin/' + key + '/js').success(function (data) {
    if (data.length > 0) {
        console.log(data, key); //as long as you can pass it to $http.get as an argument
                                //you can access it here
    }
});

Secondly, because of the event-driven nature of javascript, inner function store references to the outer function’s variables. you probably have heard of this

functions in javascript are objects

local variables and parameters are thus private members of the function:

function ObjectA(){ // define a constructor
    var x = 10      // private variable
    changeX : function(){
                  x = 20   // access and MODIFY a variable of parent scope
              }
}

if you can understand how private variable works in javascript, then you basically understand what closure is. Thus, for call back function, it is very possible that by the time it is triggered, the value of the parent scope variable is already changed. To fix this, you can use an Immediately Invoked Function Expression (IIFE)

$http.get('/plugin/' + key + '/js').success((function(currentKeyValue) {
    return function(data) {
        console.log(currentKeyValue, data);
        // again, currentKeyValue is a REFERENCE to outer function's
        // parameter. However, since String is passed by value in javascript
        // currentKeyValue of outer scope is a DIFFERENT string that has the
        // same value as KEY when it is invoked
    }
})(key)); // immediately invoke the function passing the key as a parameter