Angular filter with $http response

Question

I need a filter where i need to make $http call and then return that response . i am trying to use angular promise but nothing works . Return is not waiting for the response . Take a look below for my code. It is returning {} , Not waiting for $http response. I need this using filter only. Idea is to keep it separate from Controller , so it can be used anywhere later.

.filter('filterXML',['testOne','$sce',function(testOne, $sce){

    return function(url){

       return testOne.getTest(url).then(function(data){
         return data;
        });

    }

 }])


.factory('testOne',  ['$http', function($http){
   return {
   getTest: function(url){
    return $http.get(url).success(function(data){
      console.log(data)
      return data;
    })
  }
 }
}])

Goal : {{ 'http://rss.cnn.com/rss/cnn_topstories.rss' | filterXML}}

So it will return all data from this rss feed .

I don't want to use controller . Idea is to make separate module and call it anywhere in application .

Any help will be appreciated . Thanks

What you what would freeze the browser. What's your goal? How do you intend to use the filter? — a better oliver
– a better oliver, Commented Jul 11, 2015 at 9:20
See updated Question . Goal is to use filter to get xml data from url string and return that data . @zeroflagL — Anil Sharma
– Anil Sharma, Commented Jul 11, 2015 at 9:23
you cant return data from AJAX calls, you need to set callback functions to deal with data. — vinayakj
– vinayakj, Commented Jul 11, 2015 at 9:29
I am not in favour of filter . But that is the demand . I would have done it on my controller . But i need to do it using filter only . — Anil Sharma
– Anil Sharma, Commented Jul 11, 2015 at 9:30

Matt Herbstritt · Accepted Answer · 2015-07-11 09:29:32Z

1

You shouldn't be making http calls in a filter that's just not what filters are for. Filters are usually passed an array of objects and only the objects that pass a certain condition will be returned in the new filtered array.

I think you want to go for a set up more like this...

angular.module('foo', [])

.controller('someController', ['$scope', '$filter', 'testOne', function($scope, $filter, testOne){

    testOne.getTest('foo/bar').then(function(data){
      $scope.myFilteredData = $filter('filterXML')(data);
    });

}])


 .filter('filterXML', function() {
  return function(input) {
    // the condition on which to filter the input goes here...
    // this is just dummy code you will have to work out your own logic
    return (input === 'XML');
  };
});


.factory('testOne',  ['$http', function($http){
   return {
   getTest: function(url){
    return $http.get(url)
      .success(function(data){
        console.log(data)
        return data;
      });
  }
 }
}])

answered Jul 11, 2015 at 9:29

Matt Herbstritt

4,8825 gold badges29 silver badges33 bronze badges

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

6 Comments

Anil Sharma Over a year ago

I know this , But what if you want to do this with filters only ?

Matt Herbstritt Over a year ago

I have no idea. Filters are for filtering data and that's pretty much all they are for as far as I know.

Anil Sharma Over a year ago

Idea is to keep it separate from Controller , so it can be used anywhere . any idea without using controller ?

geoidesic Over a year ago

Put it in a service. That's what services are for – sharing code between controllers.

Dan Over a year ago

Filters are also used for projecting data. You should think of them as a map/reduce/filter style thing. They take a set of data and produce a new view of that data specifically for the view (they aren't just for filtering despite the name)

|

geoidesic · Accepted Answer · 2015-07-11 10:32:41Z

0

Use a service. In fact you've already created one:

.factory('testOne',  ['$http', function($http){
   return {
   getTest: function(url){
    return $http.get(url).success(function(data){
      console.log(data)
      return data;
    })
  }
 }
}])

Now just inject $testOne into your controller and then in your controller do:

var service = $testOne;
service.getTest('http:/some.url').then(function(response){ /*do something with the response */});

answered Jul 11, 2015 at 10:32

geoidesic

5,1435 gold badges45 silver badges61 bronze badges

2 Comments

Anil Sharma Over a year ago

See i want to keep my code separate from Controller . Otherwise everytime i have to put these line in each controller .So calling it from a filter and then it can run where ever we will call .

geoidesic Over a year ago

Read what Kasper says below. You're barking up the wrong tree with filters. It's like insisting that you want to drive on a road with a boat because you don't like filling up your tires. Wrong tool for the job.

user1364910 · Accepted Answer · 2015-07-11 12:03:04Z

I don't want to use controller . Idea is to make separate module and call it anywhere in application .

See i want to keep my code separate from Controller . Otherwise everytime i have to put these line in each controller .So calling it from a filter and then it can run where ever we will call .

I suggest you turn it into a service, and then (to be able to use it anywhere), expose the methods of said service that you want to utilize onto $rootScope* (because let's face it, a filter is not what you are looking for).

app.service('someServiceName', function ($http) {
  function getStuff (url) {
    return $http.get(url).then(function (res) {
      return res;
    });
  }

  angular.extend(this, {
    getStuff: getStuff
  });
});

app.run(function ($rootScope, someServiceName) {
  $rootScope.getStuff = someServiceName.getStuff;
});

{{ getStuff(url) }}

*: I don't usually recommend exposing stuff onto $root, but you seem pretty dead set on not using DI (if I'm reading all of the comments/answers/question(s) correctly) into the $scopes where this will be presented.

Collectives™ on Stack Overflow

Angular filter with $http response

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related