Exploring Angular's capabilities with filtering and handling $http promises

Question

Exploring Angular's capabilities with filtering and handling $http promises

Having an issue with filtering data from a JSON file that contains an array of 20 objects.

Within my factory, I have implemented two functions:

function fetchData() {
    return $http
        .get('mock.json')
        .success(_handleData)
        .error(_handleError);
}

function _handleData(data) {
    var filteredData = _filterByProperty(data, "name", "XYZ");

    console.log('filteredData', filteredData);

    return filteredData;
}

When I check the console.log("filteredData"), it only displays the filtered elements (3 out of 20);

In a service, there is an ng-click function which does the following:

var applyFilter = function () {
    DataFactory
        .fetchData(_address)
        .success(_handleServiceData);
}

where

var _handleServiceData = function (data) {
    filteredData = data;
};

The question arises - why does the 'data' in _handleServiceData display all the elements instead of the previously filtered ones?

edit: Link to the plunk for reference - results are visible in the console

javascript angularjs promise

Answer 1

Answer №1

The issue stems from the fact that the filteredData returned by the _handleData function is not being passed to the success callback within the filterMe function. This is because the callback is attached to the same promise, unlike the then method which creates a new promise. To resolve this, update your code as follows:

function getData() {
    return $http
       .get('mock.json')
       .then(_handleData, _handleError); //replace "success" with "then"
}

Then, in the filterMe function:

var filterMe = function () {
    DataFactory
        .getData(_address)
        .then(_handleServiceData);
}

Answer 2

The issue stems from the fact that the filteredData returned by the _handleData function is not being passed to the success callback within the filterMe function. This is because the callback is attached to the same promise, unlike the then method which creates a new promise. To resolve this, update your code as follows:

function getData() {
    return $http
       .get('mock.json')
       .then(_handleData, _handleError); //replace "success" with "then"
}

Then, in the filterMe function:

var filterMe = function () {
    DataFactory
        .getData(_address)
        .then(_handleServiceData);
}

Answer 3

Answer №2

Due to the asynchronous nature of promises, it appears that you are returning the value of filtered to your caller before it has been assigned.

It is recommended to modify your code as follows:

function retrieveData() {
    return $http
        .get('mock.json')
        .then(_handleData); // utilizing then (for chaining), not success!
}
var filterData = function () {
    return DataFactory
//  ^^^^^^ ensure to return a promise, refrain from assigning globals within asynchronous callbacks
        .retrieveData(_address)
        .catch(_handleError); // the assumption is error handling should occur at the end
}

Answer 4

Due to the asynchronous nature of promises, it appears that you are returning the value of filtered to your caller before it has been assigned.

It is recommended to modify your code as follows:

function retrieveData() {
    return $http
        .get('mock.json')
        .then(_handleData); // utilizing then (for chaining), not success!
}
var filterData = function () {
    return DataFactory
//  ^^^^^^ ensure to return a promise, refrain from assigning globals within asynchronous callbacks
        .retrieveData(_address)
        .catch(_handleError); // the assumption is error handling should occur at the end
}

Exploring Angular's capabilities with filtering and handling $http promises

Answer №1

Answer №2

Similar questions

Maintaining sequential order IDs for table rows even after removing records

Tips for sending a string from the state of a React component to an external Python script

Leverage the power of an Express server to manage a Node.js application

Having issues with the autocompletion feature in ng-tags-input

Creating synchronous automation in Selenium: A step-by-step guide

Tips for changing an angular variable string before sending it to a PHP function

To properly format the date value from the ngModel in Angular before sending it to the payload, I require the date to be in the format

Incorporating an external JSX file into an HTML page in a React project

JavaScript: void(0), Internet Explorer 6, and SWFAddress are all important components

Enhance the display in Angular2

Only the first element can trigger reactions in jQuery and Ajax!

Issue with Slider Width in WP 5.6 editor and ACF Pro causing layout problems

Leverage the power of both ui-sref and $state.go for seamless state transitions in Angular's ui

Obtaining JSON data in a separate JavaScript file using PHP

"What is the best way to access the value of a useState variable in ReactJS on a global

The ReCaptcha and AJAX Integration

Loading Collada files with a progress callback function can help track the

Navigating through a Single Page Application (SPA) can be achieved without

Implement a callback function for unchecked checkboxes on change

Reactjs - Creating a video component with a placeholder that loads the video seamlessly