CODEWITHSUNDEEP
javascriptangularjsangular-components
Ian Steffy
Ian Steffy

Reputation: 1234

Change data in Service

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

Upvotes: 0

Views: 100

Answers (4)

Himesh Suthar
Himesh Suthar

Reputation: 562

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

Upvotes: 1

CodeWarrior
CodeWarrior

Reputation: 2851

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

})

Upvotes: 1

Michael M
Michael M

Reputation: 456

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.

Upvotes: 1

Stanislav Kvitash
Stanislav Kvitash

Reputation: 4622

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

Upvotes: 1

Related Questions