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

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

Answer 2

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

Answer 3

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.