Modify the information being retrieved from a promise

Question

Modify the information being retrieved from a promise

Within my application, there is a service that the controller calls upon to retrieve an array of objects. However, not all of the data returned by this service is relevant to my needs. I am interested in extracting only specific information from the array. Is there a way to customize the structure of the returned array so that it contains only the necessary data?

For instance:

$scope.information = [];

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

In the given example, the data.Information array consists of objects with properties like:

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

However, for my controller's purpose, I am only interested in the 'id' and 'name' attributes, excluding the rest. It would be ideal to streamline the retrieval process by eliminating unnecessary details and preventing front-end bloat. Can I arrange the $scope variable to contain only the required data within the objects?

javascript angularjs

Answer 1

Answer №1

It seems like you are interested in applying a map function to the array. This means that for each element in the array, you want to transform it in some way. To achieve this, you can utilize the Array.prototype.map method. Here is a helpful link to the MDN documentation for more information.

For example:

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

Answer 2

It seems like you are interested in applying a map function to the array. This means that for each element in the array, you want to transform it in some way. To achieve this, you can utilize the Array.prototype.map method. Here is a helpful link to the MDN documentation for more information.

For example:

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

Answer 3

Answer №2

There are multiple ways to accomplish this task, but here is one simple approach:

$scope.info = [];

var fetchData = function() {
  var promise = myService.fetchData();
  promise.then(function(data) {
    $scope.info = data.Info.map(function(d) {
      return {
        id: d.id,
        name: d.name
      };
    });
  },
  function (dataError) {
    console.log(dataError);
  )};
};

(Keep in mind that I have not tested this code, so you may need to make adjustments as needed)

Answer 4

There are multiple ways to accomplish this task, but here is one simple approach:

$scope.info = [];

var fetchData = function() {
  var promise = myService.fetchData();
  promise.then(function(data) {
    $scope.info = data.Info.map(function(d) {
      return {
        id: d.id,
        name: d.name
      };
    });
  },
  function (dataError) {
    console.log(dataError);
  )};
};

(Keep in mind that I have not tested this code, so you may need to make adjustments as needed)

Answer 5

Answer №3

John's response offers a great illustration of post-fetch data filtering in action. In the project I am currently involved in, there are situations where calculating certain fields for records from our backend server via its REST API can be resource-intensive. This leads us to carry out similar operations as shown below:

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

In this scenario, the service or backend takes charge of data filtering, allowing only essential information to be transmitted back to us. Considering implementing (or persuading the service maintainers to implement) such filtration mechanisms is an alternative strategy worth exploring.

Answer 6

John's response offers a great illustration of post-fetch data filtering in action. In the project I am currently involved in, there are situations where calculating certain fields for records from our backend server via its REST API can be resource-intensive. This leads us to carry out similar operations as shown below:

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

In this scenario, the service or backend takes charge of data filtering, allowing only essential information to be transmitted back to us. Considering implementing (or persuading the service maintainers to implement) such filtration mechanisms is an alternative strategy worth exploring.

Answer 7

Answer №4

If you want to sort through the information provided by the service:

app.service("myService", function("$http") {
    this.getData() = function() {
        return $http.get(url)
          .then(function(response) {
            return response.data;
        });
    };
    this.infoRetrieve = 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;
    };
});

How to use this feature:

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

By utilizing the .then method of a promise to send back data, a fresh promise is formed that resolves to the value of the returned information.

Answer 8

If you want to sort through the information provided by the service:

app.service("myService", function("$http") {
    this.getData() = function() {
        return $http.get(url)
          .then(function(response) {
            return response.data;
        });
    };
    this.infoRetrieve = 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;
    };
});

How to use this feature:

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

By utilizing the .then method of a promise to send back data, a fresh promise is formed that resolves to the value of the returned information.

Modify the information being retrieved from a promise

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Vue.js is throwing a TypeError message stating that it is unable to read the property 'post' of undefined, despite the fact that vue-resource has been successfully

I attempt to demonstrate to my users, but unfortunately, it doesn't seem to be successful

Tips for maintaining an exposed dropdown menu in the following page?

Handling Forms with Node and Express

The functionality of fetching website titles using Ajax/jQuery is experiencing some limitations

Triggering a Dialogflow Chat Window with a click on a Material-UI Floating Action Button in a ReactJS application

Difficulties with angular ui-router authentication problems

Employing switch statements to match regular expressions in JavaScript

Tips for Preventing or Eliminating Duplicate Random Numbers in PHP

Firefox unable to play video recorded in Chrome

What method sits snugly between prepend() and append()?

Display the text once using ng-repeat only if a certain condition is met

What are the steps to employ a query string to display a specific image?

Ways to alter a PHP variable with each AJAX request

Adding an onload event to a popup window using Javascript

Notify immediately if there is any clicking activity detected within a designated div container

What is the process for retrieving values from dynamic textareas using Vue JS?

Having trouble with accessing properties like `d3.svg()`, `d3.scale()` and other features of d3js within an Angular 2 environment

Mongoose discovers an unexpected empty array

How can you retrieve the value of a CSS file in Javascript and CSS?