How to execute string as a function using AngularJS?

Question

I have these two functions defined:

function fetchYPosts() {
    $http.get("/postsY/")
    .then(function(response) {
        self.posts = response.data;
    }, function(response) {
        self.posts = {};
    }); 
};
function fetchXPosts() {
    $http.get("/postsX/")
    .then(function(response) {
        self.posts = response.data;
    }, function(response) {
        self.posts = {};
    }); 
};

I am passed an id and a string ('X' or 'Y' is what I want the end-user to pass to me) from the front-end. I have this code which handles when the string is passed:

self.handler = function(id, XOrY) {
    $http.post("/" + XOrY + "/" + id + "/handle/")
    .then(function(response) {
        functionToCall = "fetch" + XOrY + "Posts()";
        # Here is where I want to call funcitonToCall.
    }, function(response) {
        self.cerrorMessages = BaseService.accessErrors(response.data);
    });
};

With that said, given a variable which holds a string, how do I call the function which has the name of the string variable?

Looks like an XY problem. Why exactly do you want to do this? — elclanrs, Nov 19 '15 at 00:19
@elclanrs I have two objects on the front-end (XPosts and YPosts). Each post has a button. The button should post to the URL `/{{X or Y}}/id/handle` and then call `fetch{{ XorY }}()`. — SilentDev, Nov 19 '15 at 01:03

David Zorychta · Accepted Answer · 2015-11-19T00:34:29.067

You should select the correct method using something like this:

var fetcher = XOrY == 'x' ? fetchXPosts : fetchYPosts;

which can be used like:

self.handler = function(id, XOrY) {
    var fetcher = XOrY == 'x' ? fetchXPosts : fetchYPosts;
    $http.post("/" + XOrY + "/" + id + "/handle/")
    .then(function(response) {
        fetcher();
        # Here is where I want to call funcitonToCall.
    }, function(response) {
        self.cerrorMessages = BaseService.accessErrors(response.data);
    });
};

If you have a situation where there's just too many different fetching functions, you can instead define them like this as part of a hash:

var fetch = {

  YPosts: function() {
    $http.get("/postsY/")
    .then(function(response) {
        self.posts = response.data;
    }, function(response) {
        self.posts = {};
    }); 
  },

  XPosts: function() {
    $http.get("/postsX/")
    .then(function(response) {
        self.posts = response.data;
    }, function(response) {
        self.posts = {};
    }); 
  }

}

and grab the function from fetch[XorY]:

self.handler = function(id, XOrY) {
    $http.post("/" + XOrY + "/" + id + "/handle/")
    .then(function(response) {
        fetch[XorY]();
        # Here is where I want to call funcitonToCall.
    }, function(response) {
        self.cerrorMessages = BaseService.accessErrors(response.data);
    });
};

I used the second way you provided because it looks cleaner and more resuable. I am noticing a difference in speed for some reason (it's noticeably slower doing `fetch[XOrY]()` than `fetchPosts()`) but other than that, it's good. — SilentDev, Nov 19 '15 at 01:01

Sean · Answer 2 · 2015-11-19T00:58:57.850

1

you can encapsule these two function in an object, and call this service in your method like this

   var service = {
     fetchXPosts: function(){},
     fetchYPosts： function(){}
   }

    self.handler = function(id, XORY) {
       service['fetch'+XORY+'posts']();
    }

edited Nov 19 '15 at 00:58

answered Nov 19 '15 at 00:36

Sean

2,990
1
21
31

Thanks. Just to verify, what exactly does `.call(service, id);` do? Wouldn't `service['fetch'+XORY+'posts']` be sufficient, given that my `fetchXPosts` and `fetchYPosts` functions do not require the `id` parameter? – SilentDev Nov 19 '15 at 00:55
ok, then you don't need call, you can just use `service['fetch+'XORY'+posts']()` to execute function, call will be used when you want to bind the `this` context of function. – Sean Nov 19 '15 at 00:58

How to execute string as a function using AngularJS?

2 Answers2

Linked