Change data in Service

Question

I have a service that grabs JSON from a URL and I would like to alter that data but I cant seem to do it. Right now I change this in the controller but this seems messy with the scope not reaching places I would like.

//SERVICE
app.service("servers", function ($http, $q)
{
    // Grab json
    var deferred = $q.defer();
    $http.get('http://www.mocky.io/v2/58bea87e260000c318f07bfd').then(function (data)
    {
        deferred.resolve(data);
    });

    this.getItems = function ()
    {
        return deferred.promise;
    }

})


   // CONTROLLER

.controller("AppCtrl", function ($scope, servers, geoIP) {
    var promise = servers.getItems();
    promise.then(function (data)
    {
        $scope.items = data.data.items;
    });

    $scope.getSelectedItem = function() {
        return servers.selectedItem;
    }


    $scope.selectServer = function(item)
    {
        servers.selectedItem = item;

         servers.selectedItem.refactored_match_state = lowerCamelCaseUnderscoreRefactor(servers.selectedItem.session.attributes.match_state);

    }

    //COMPONENT/TEMPLATES
    //dbServerTable
    <tr data-ng-repeat="item in items | filter:search | orderBy:'name'"  data-ng-click="selectServer(item)">
        <td>{{item.display_name}}</td>
    </tr>

    //dbServerInfoSidebar
    <li>{{getSelectedItem().refactored_match_state}}</li>

Could anyone show me with code how to alter data in a service that can be used anywhere by any controller that can access that service

How would you like to alter the data? You can always alter it before resolving promise or by adding then to already resolved one. — Kamil Socha, Jul 31 '17 at 17:50

score 1 · Answer 1 · answered Jul 31 '17 at 18:01

1

You can use transformResponse property of $http service;
You can modify your data before resolving the promise deferred.resolve(data);.

answered Jul 31 '17 at 18:01

Stanislav Kvitash

4,614
18
29

score 1 · Answer 2 · answered Jul 31 '17 at 18:03

Are you trying to do something like:

app.service("servers", function ($http, $q)
{
    this.parseData = data => {
        //modify data;
        return data;
    };

    this._request = $http.get('http://www.mocky.io/v2/58bea87e260000c318f07bfd')
      .then(this.parseData);

    this.getItems = () => this._request;
});

You don't need to use deferred at all. It's unnecessary. $http returns a promise for you. If you want to alter any data, you just need to chain after the request and return the modified data in the chained method.

score 1 · Accepted Answer · answered Jul 31 '17 at 18:15

The way the service has been coded is an anti-pattern and should be avoided. Refer this link.

Change your service like below and make modifications to the data before you return the data within the .then function.

app.service("servers", function ($http)
{
    this.getItems = function ()
    {
        return $http.get('http://www.mocky.io/v2/58bea87e260000c318f07bfd')
              .then(function (data)
                  {
                    // **** Modify data here ****
                    return data;
                  });
    }

})

This was the first clean solution I tried and it worked. – Ian Steffy Aug 02 '17 at 19:33 — Ian Steffy, Aug 02 '17 at 19:33

Himesh Suthar · Answer 4 · 2017-07-31T18:59:04.170

app.service('services',['$q','$http','$rootScope',function($q,$http,$rootScope){
    var obj ={};
        obj.getData =function(x){
        var defer = $q.defer();
        $http.get('http://www.mocky.io/v2/58bea87e260000c318f07bfd')
        .then(function(response){
            defer.resolve(response);
        },function(error){
            defer.reject(error);
        });
        return defer.promise;
      }
    return obj;
    }])

app.controller('ctrl',function($scope,services){
   $scope.getItems = function(){
     services.getData()
    .then(function(response){
      $scope.Items=response.data;
    },function(error){
      console.log(error);
    });
  }
})

Change data in Service

4 Answers4