CODEWITHSUNDEEP
javascriptangularjs
myLogicIsWrong
myLogicIsWrong

Reputation: 67

Change data being returned by a promise

My application has a service that is called in the controller. This service sends down an array of objects. My controller doesn't need all of the data that is being returned, instead I would like to only grab the data I need. Is there a way to construct the array of objects being returned so that I only include my needed data?

Example:

$scope.information = [];

var loadData = function() {
  var promise = myService.getData();
  promise.then(function(data) {
    $scope.information = data.Information;
  },
  function (dataError) {
    console.log(dataError);
  )};
};

In my example above, data.Information is an array of objects that look like this:

{
  id: 1,
  name: 'joe',
  age: '21',
  hair: 'blue',
  height: '70',
}

In my controller I only need the 'id' and 'name' properties, not the others. Shouldn't I want to only retrieve the necessary data? And can I construct my $scope variable so I only have this data in the objects, as to not include any unnecessary information, resulting in bloating the front end?

Upvotes: 0

Views: 76

Answers (4)

georgeawg
georgeawg

Reputation: 48968

If you wish to filter the data in the service:

app.service("myService", function("$http") {
    this.getData() = function() {
        return $http.get(url)
          .then(function(response) {
            return response.data;
        });
    };
    this.informationGet = function() {
        var promise = this.getData();
        var newPromise = promise.then(function(data) {
            var information = data.Information.map(function(d) {
                return {
                    id: d.id,
                    name: d.name
                };
            });
            return information;
        });
        return newPromise;
    };
});

Usage:

  var promise = myService.informationGet();
  promise.then(function(information) {
    $scope.information = information;
  },
  function (dataError) {
    console.log(dataError);
    throw dataError;
  )};

By returning data to the .then method of a promise, one creates a new promise that resolves to the value of the returned data.

Upvotes: 0

Berry
Berry

Reputation: 1749

Tamas' answer is a good example of filtering the data AFTER it has been fetched from the 'service'. In the application I'm working on, it can sometimes expensive to calculate some of the fields of the records from our 'service', which is actually a backend server with a REST API. We wind up doing the equivalent of

var loadData = function() {
  var promise = myService.getData({fields: "name,id"});
  promise.then(function(data) {
    $scope.information = data;
    });
  },
  function (dataError) {
    console.log(dataError);
  )};
};

Then the service, or backend, does the filtering for us and the only data sent back is exactly what we need. If you can implement (or convince the service maintainers to implement) this kind of filtering, it's another approach you can consider.

Upvotes: 0

Tamas
Tamas

Reputation: 11244

This should be easy - you have many options to achieve this, here's one:

$scope.information = [];

var loadData = function() {
  var promise = myService.getData();
  promise.then(function(data) {
    $scope.information = data.Information.map(function(d) {
      return {
        id: d.id,
        name: d.name
      };
    });
  },
  function (dataError) {
    console.log(dataError);
  )};
};

(I haven't tested this code so you may need to tweak it around a bit)

Upvotes: 1

Ryan Baker
Ryan Baker

Reputation: 303

It looks like you want to apply a map operation to the list. That is: for each item in the list, you'd like to have every item in the list be modified in some way. You can use Array.prototype.map to accomplish this. Here is a link to the MDN docs for reference.

E.g.

$scope.information = data.Information.map(function(element) {
    return {
        id: element.id,
        name: element.name
    }
});

Upvotes: 1

Related Questions