Processing http response in service

Question

I recently posted a detailed description of the issue I am facing here at SO  As I couldn t send an actual  http request  I used timeout to simulate asynchronous behavior  Data binding from my model to view is working correct  with the help of  Gloopy  Now  when I use  http instead of  timeout  tested locally   I could see the asynchronous request was successful and data is filled with json response in my service  But  my view is not updating   updated Plunkr here

User · Answer

I really don t like the fact that  because of the  promise  way of doing things  the consumer of the service that uses  http has to  know  about how to unpack the response    I just want to call something and get the data out  similar to the old  scope items   Data getData    way  which is now deprecated   I tried for a while and didn t come up with a perfect solution  but here s my best shot  Plunker   It may be useful to someone   app factory  myService   function  http      var  data      cache data rather than promise   var myService          myService getData   function obj         if   data           http get  test json   then function result            data   result data          console log  data       prove that it executes once         angular extend obj   data                    else           angular extend obj   data                 return myService         Then controller   app controller  MainCtrl   function  myService  scope       scope clearData   function          scope data   Object create null           scope getData   function          scope clearData        also important  need to prepare input to getData as an object     myService getData  scope data        important bit   pass in object you want to augment            Flaws I can already spot are   You have to pass in the object which you want the data added to  which isn t an intuitive or common pattern in Angular  getData can only accept the obj parameter in the form of an object  although it could also accept an array   which won t be a problem for many applications  but it s a sore limitation You have to prepare the input object  scope data with      to make it an object  essentially what  scope clearData   does above   or      for an array  or it won t work  we re already having to assume something about what data is coming    I tried to do this preparation step IN getData  but no luck    Nevertheless  it provides a pattern which removes controller  promise unwrap  boilerplate  and might be useful in cases when you want to use certain data obtained from  http in more than one place while keeping it DRY

User · Answer

Please try the below Code     You can split the controller  PageCtrl  and service  dataService     x000D   x000D   use strict   x000D   function      x000D      angular module  myApp   x000D           controller  pageContl      scope    dataService   PageContl   x000D           service  dataService      q     http   DataService    x000D      function DataService  q   http   x000D          this  q    q  x000D          this  http    http  x000D                blob blob  x000D        x000D      DataService prototype     x000D          getSearchData  function      x000D              var deferred   this  q defer      initiating promise x000D              this  http   x000D                  method   POST    GET x000D                  url   test json   x000D                  headers     Content-Type    application json    x000D                 then function result    x000D                  deferred resolve result data   x000D                function  error    x000D                  deferred reject error   x000D                  x000D              return deferred promise  x000D             x000D          getABCDATA  function      x000D   x000D            x000D         x000D      function PageContl  scope  dataService    x000D          this  scope    scope  x000D          this dataService   dataService    injecting service Dependency in ctrl x000D          this pageData         or     x000D        x000D      PageContl prototype     x000D           searchData  function      x000D               var self   this    we can t access  this  of parent fn from callback or inner function  that s why assigning in temp variable x000D               this dataService getSearchData   then function  data    x000D                   self searchData   data  x000D                   x000D             x000D        x000D        x000D   x000D   x000D

User · Answer

A much better way I think would be something like this   Service   app service  FruitsManager  function  q        function getAllFruits            var deferred    q defer                             somewhere here use  deferred resolve awesomeFruits                         return deferred promise             return          getAllFruits getAllFruits              And in the controller you can simply use    scope fruits   FruitsManager getAllFruits      Angular will automatically put the resolved awesomeFruits into the  scope fruits

User · Answer

I had the same problem  but when I was surfing on the internet I understood that  http return back by default a promise  then I could use it with  then  after return the  data   look at the code    app service  myService   function  http           this getData   function             var myResponseData    http get  test json   then function  response                console log response                return response data                         return myResponseData                     app controller  MainCtrl   function  myService   scope             Call the getData and set the response  data  in your scope          myService getData then function myReponseData             scope data   myReponseData

User · Answer

I ve read http   markdalgleish com 2013 06 using-promises-in-angularjs-views   AngularJS allows us to streamline our controller logic by placing a promise directly on the scope  rather than manually handing the resolved value in a success callback    so simply and handy     var app   angular module  myApp                    app factory  Data   function  http  q                    return                       getData   function                            var deferred    q defer                            var promise    http get    largeLoad   success function  response                                deferred resolve response                                                          Return the promise to the controller                         return deferred promise                                                                       app controller  FetchCtrl  function  scope Data                    scope items   Data getData                      Hope this help

User · Answer

tosh shimayama have a solution but you can simplify a lot if you use the fact that  http returns promises and that promises can return a value   app factory  myService   function  http   q      myService async   function         return  http get  test json        then function  response          var data   reponse data        console log data         return data                  return myService       app controller  MainCtrl   function  myService  scope       scope asyncData   myService async       scope  watch  asyncData   function asyncData        if angular isDefined asyncData              Do something with the returned data  angular handle promises fine  you don t have to reassign the value to the scope if you just want to use it with angular directives                    A little demonstration in coffeescript  http   plunker no de edit ksnErx live preview  Your plunker updated with my method  http   plnkr co edit mwSZGK p preview

User · Answer

Let it be simple  It s as simple as    Return promise in your service no need to use then in service  Use then in your controller   Demo  http   plnkr co edit cbdG5p p preview  var app   angular module  plunker         app factory  myService   function  http      return       async  function           return  http get  test json       1  this returns promise                 app controller  MainCtrl   function  myService  scope      myService async   then function d      2  so you can use  then        scope data   d

User · Answer

Here is a Plunk that does what you want  http   plnkr co edit TTlbSv p preview  The idea is that you work with promises directly and their  then  functions to manipulate and access the asynchronously returned responses   app factory  myService   function  http      var myService         async  function               http returns a promise  which has a then function  which also returns a promise       var promise    http get  test json   then function  response               The then function here is an opportunity to modify the response         console log response              The return value gets picked up by the then in the controller          return response data                     Return the promise to the controller       return promise               return myService       app controller  MainCtrl   function  myService  scope         Call the async method and then do stuff with what is returned inside our own then function   myService async   then function d         scope data   d              Here is a slightly more complicated version that caches the request so you only make it first time  http   plnkr co edit 2yH1F4IMZlMS8QsV9rHv p preview    app factory  myService   function  http      var promise    var myService         async  function           if    promise                 http returns a promise  which has a then function  which also returns a promise         promise    http get  test json   then function  response                 The then function here is an opportunity to modify the response           console log response                The return value gets picked up by the then in the controller            return response data                               Return the promise to the controller       return promise               return myService       app controller  MainCtrl   function  myService  scope       scope clearData   function          scope data               scope getData   function            Call the async method and then do stuff with what is returned inside our own then function     myService async   then function d           scope data   d

User · Answer

Because it is asynchronous  the  scope is getting the data before the ajax call is complete   You could use  q in your service to create promise and give it back to controller  and controller obtain the result within then   call against promise   In your service   app factory  myService   function  http   q      var deffered    q defer      var data           var myService          myService async   function          http get  test json        success function  d          data   d        console log d         deffered resolve                return deffered promise         myService data   function     return data        return myService        Then  in your controller   app controller  MainCtrl   function  myService  scope      myService async   then function          scope data   myService data

User · Answer

Related to this I went through a similar problem  but not with get or post made by Angular but with an extension made by a 3rd party  in my case Chrome Extension   The problem that I faced is that the Chrome Extension won t return then   so I was unable to do it the way in the solution above but the result is still Asynchronous  So my solution is to create a service and to proceed to a callback  app service  cookieInfoService   function         this getInfo   function callback            var model               chrome cookies get  url serverUrl  name  userId    function  response                model response  response              callback model                            Then in my controller  app controller  MyCtrl   function   scope  cookieInfoService        cookieInfoService getInfo function  info            console log info                 Hope this can help others getting the same issue

User · Answer

When binding the UI to your array you ll want to make sure you update that same array directly by setting the length to 0 and pushing the data into the array   Instead of this  which set a different array reference to data which your UI won t know about     myService async   function          http get  test json        success function  d          data   d                 try this    myService async   function          http get  test json        success function  d          data length   0        for var i   0  i  lt  d length  i             data push d i                           Here is a fiddle that shows the difference between setting a new array vs emptying and adding to an existing one  I couldn t get your plnkr working but hopefully this works for you

User · Answer

As far as caching the response in service is concerned   here s another version that seems more straight forward than what I ve seen so far   App factory  dataStorage   function  http         var dataStorage   storage for cache       return  function                 if dataStorage exists returned cached version         return dataStorage   dataStorage     http         url   your json         method   GET         cache  true        then function  response                   console log  if storage don  t exist       response                  return response                                    this service will return either the cached data or  http get    dataStorage then function data          scope data   data     function e       console log  err      e

[javascript] Processing $http response in service

Examples related to javascript

Examples related to angularjs

Examples related to angular-http