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
– elclanrs, Commented Nov 19, 2015 at 0: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
– SilentDev, Commented Nov 19, 2015 at 1:03

Leah Zorychta · Accepted Answer · 2015-11-19 00:34:29Z

2

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

edited Nov 19, 2015 at 0:34

answered Nov 19, 2015 at 0:22

Leah Zorychta

13.5k7 gold badges49 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SilentDev Over a year ago

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.

Sean · Accepted Answer · 2015-11-19 00:58:57Z

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, 2015 at 0:58

answered Nov 19, 2015 at 0:36

Sean

3,0722 gold badges23 silver badges35 bronze badges

2 Comments

SilentDev Over a year ago

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?

Sean Over a year ago

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.

Collectives™ on Stack Overflow

How to execute string as a function using AngularJS?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related