Angular: can't apply a filter to data loaded via $http

Question

I have some data being pulled in from an API in my controller with $http.get I then want to apply a text formatting filter to that text to make it all pretty.

However I am getting

TypeError: Cannot read property 'split' of undefined

all over my console.

Here's the code:

Controller $http get:

$http.get("url to my api data")
    .success(function (data, status, headers, config) {

        $scope.serviceStatus = data;

    })
    .error(function () {

    });

Filter within module:

app.filter('textFormat', function() {
    function format(input) {  
        // Call the passed in endpoint and at any capitalised letters, split it to have a space between words
        input = input.split(/(?=[A-Z])/).join(" ");

        // Get the character at index 0 and modify it to be uppercase. Then append the rest of the split string to the end
        input = input.charAt(0).toUpperCase() + input.slice(1);

        return input;
    };

    format.$stateful = true;

    return format;
});

HTML:

<div ng-repeat="services in serviceStatus">
    <p>The {{ services.service | textFormat }} is {{ services.status | textFormat }}</p>
</div>

I then want to apply a text formatting filter to that text to make it all pretty. This is not what filter should do. This is a directive's job — Anand G
– Anand G, Commented Dec 4, 2015 at 11:41
That's because your filter is called in every watch and before $http.get could receive the data, it has been called multiple times already. — domino_katrino
– domino_katrino, Commented Dec 4, 2015 at 11:47
@AnandG - There is no DOM manipulation here. Only simple text formatting. A filter is perfect fit to be used in such scenario. — domino_katrino
– domino_katrino, Commented Dec 4, 2015 at 11:49

Vineet · Accepted Answer · 2015-12-04 11:35:01Z

3

You are getting this issue because of $http is an async call. It avoid from normal execution flow. You should change your filter code by below one

app.filter('textFormat', function() {
    function format(input) {  
     if(input) {  // Check if the value has been initialized
          // Call the passed in endpoint and at any capitalised letters, split it to have a space between words
          input = input.split(/(?=[A-Z])/).join(" ");

          // Get the character at index 0 and modify it to be uppercase. Then append the rest of the split string to the end
          input = input.charAt(0).toUpperCase() + input.slice(1);

          return input;
       }
    };

    format.$stateful = true; // You can put these two lines in above code as well. 

    return format;
});

edited Dec 4, 2015 at 11:35

answered Dec 4, 2015 at 11:29

Vineet

4,7153 gold badges25 silver badges42 bronze badges

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

1 Comment

Dan Hodson Over a year ago

Thanks so much @Vineet that's sorted two Filters I was having problems with in one go! Upvote to you sir!

Andrew · Accepted Answer · 2015-12-04 11:51:44Z

0

You can not to use your filter function as a angular filter. The other solution is to place your filter function in your controller instead and then just call it from your view like this:

<div ng-repeat="services in serviceStatus">
<p>The {{ services.service | filter:textFormat }} is {{ services.status | filter:textFormat }}</p>
</div>

Be sure that textFormat is the name of your function

answered Dec 4, 2015 at 11:51

Andrew

1,5344 gold badges20 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular: can't apply a filter to data loaded via $http

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related