AngularJS anticipates the completion of a lone asynchronous request

Question

AngularJS anticipates the completion of a lone asynchronous request

Attempting to assign data to the scope after an asynchronous call.
There is an array named companies in the factory.

factory.getByCategoryId = function (id) {
  $http.get('http://localhost/campaign?access-token=12345&id=2').then(
    function (result) {
      factory.companies = [];
      if (result.data.length !== 0) {
        for (var index = 0; index < result.data.length; index++) {
          factory.companies.push(result.data[index]);
       }
      } else {
        console.log('Result is not set.', result);
      }
    },
    function (result) {
      console.log('Failed', result);
    }
  );
}

Function invocation:

$scope.closeModal = function (index) {
  if (index) {
    var promises = []

    promises.push(Service.getByCategoryId($scope.categories[index].id));

    $q.all(promises).then(function () {
      $scope.myItems = Service.all(); //return all from factory.companies

      $scope.refreshItems(); //this function refreshes the DOM using myItems
    });
  }
}

The first time this function is called, factory.companies remains unchanged, but it gets updated on subsequent calls. There seems to be a delay before the update takes place, but I'm uncertain how to address it.

javascript angularjs asynchronous ionic-framework q

Answer 1

Answer №1

I recommend simplifying your Service function by returning only the $http.

Update your factory like this:

factory.getByCategoryId = function (id) {
    return $http.get('http://localhost/campaign?access-token=12345&id=2');
}

Then modify your function to call the Service:

$scope.closeModal = function (index) {
    Service.getByCategoryId($scope.categories[index].id).then(
    function (result) {
        if (result.data.length) {
            angular.forEach(result.data, function(value) {
                $scope.myItems.push(value);
            });
            $scope.refreshItems();
        } else {
            console.log('Result is not set.', result);
        }
    },
    function (result) {
      console.log('Failed', result);
    }
};

An alternative approach is to update your service function to resolve a promise:

factory.getByCategoryId = function (id) {
    return $q(function (resolve, reject) {
        $http.get('http://localhost/campaign?access-token=12345&id=2').then(
            function (result) {
                factory.companies = [];
                if (result.data.length !== 0) {
                    for (var index = 0; index < result.data.length; index++) {
                        factory.companies.push(result.data[index]);
                    }
                    resolve(factory.companies);
                } else {
                    reject('Result is not set.', result);
                }
            },
            function (result) {
                console.log('Failed', result);
            }
        );
    });
}

Now you can use it like this:

$scope.closeModal = function (index) {
    Service.getByCategoryId($scope.categories[index].id).then(function(result) {
    $scope.myItems = result;
    $scope.refreshItems();
}, function(result) {
    console.log(result);
});

Answer 2

I recommend simplifying your Service function by returning only the $http.

Update your factory like this:

factory.getByCategoryId = function (id) {
    return $http.get('http://localhost/campaign?access-token=12345&id=2');
}

Then modify your function to call the Service:

$scope.closeModal = function (index) {
    Service.getByCategoryId($scope.categories[index].id).then(
    function (result) {
        if (result.data.length) {
            angular.forEach(result.data, function(value) {
                $scope.myItems.push(value);
            });
            $scope.refreshItems();
        } else {
            console.log('Result is not set.', result);
        }
    },
    function (result) {
      console.log('Failed', result);
    }
};

An alternative approach is to update your service function to resolve a promise:

factory.getByCategoryId = function (id) {
    return $q(function (resolve, reject) {
        $http.get('http://localhost/campaign?access-token=12345&id=2').then(
            function (result) {
                factory.companies = [];
                if (result.data.length !== 0) {
                    for (var index = 0; index < result.data.length; index++) {
                        factory.companies.push(result.data[index]);
                    }
                    resolve(factory.companies);
                } else {
                    reject('Result is not set.', result);
                }
            },
            function (result) {
                console.log('Failed', result);
            }
        );
    });
}

Now you can use it like this:

$scope.closeModal = function (index) {
    Service.getByCategoryId($scope.categories[index].id).then(function(result) {
    $scope.myItems = result;
    $scope.refreshItems();
}, function(result) {
    console.log(result);
});

Answer 3

Answer №2

If

Service.getByCategoryId($scope.categories[index].id)

Is returning a promise then

$scope.closeModal = function (index) {
if (index) {
    Service.getByCategoryId($scope.categories[index].id).then(function (res) {
        $scope.myItems = Service.all(); //return all from factory.companies
        $scope.refreshItems(); //this function refreshes the DOM using myItems
    }, function (res) {
        // Error Handling
    })
 }
}

In Case You Need More Info ::

app.factory('Service', function ($http) {
return {
    // Function to get a promise
    getByCategoryId_promise: function () {
        // Providing the promise, additional implementation may be needed for execution
        return $http.get("URL GOES HERE");
    },
    // Function to get results from a promise
    getByCategoryId: function () {
        // This Function waits till the HTTP call is resolved and then sends the result
        return $http.get("URL GOES HERE").then(function (res) { }, function (res) { })
    },
}
})

Answer 4

If

Service.getByCategoryId($scope.categories[index].id)

Is returning a promise then

$scope.closeModal = function (index) {
if (index) {
    Service.getByCategoryId($scope.categories[index].id).then(function (res) {
        $scope.myItems = Service.all(); //return all from factory.companies
        $scope.refreshItems(); //this function refreshes the DOM using myItems
    }, function (res) {
        // Error Handling
    })
 }
}

In Case You Need More Info ::

app.factory('Service', function ($http) {
return {
    // Function to get a promise
    getByCategoryId_promise: function () {
        // Providing the promise, additional implementation may be needed for execution
        return $http.get("URL GOES HERE");
    },
    // Function to get results from a promise
    getByCategoryId: function () {
        // This Function waits till the HTTP call is resolved and then sends the result
        return $http.get("URL GOES HERE").then(function (res) { }, function (res) { })
    },
}
})

Answer 5

Answer №3

    When calling Service.getByCategoryId($scope.categories[index].id), the result is added to the promises array.

The value returned by Service.getByCategoryId is asked for.

Since there is no explicit return statement in Service.getByCategoryId, its value is considered as undefined.

In order to make Service.getByCategoryId return a promise (most likely from $http.get), adjustments need to be made.

Answer 6

    When calling Service.getByCategoryId($scope.categories[index].id), the result is added to the promises array.

The value returned by Service.getByCategoryId is asked for.

Since there is no explicit return statement in Service.getByCategoryId, its value is considered as undefined.

In order to make Service.getByCategoryId return a promise (most likely from $http.get), adjustments need to be made.

AngularJS anticipates the completion of a lone asynchronous request

Answer №1

Answer №2

Answer №3

Similar questions

Using jQuery, you can disable an option upon selection and also change its border color

JavaScript sorted arrays are an efficient way to keep data

Matching nodes to selectors is a breeze with Angular JS and jqLite

Tips for altering a key within a tree-view:

Tips for locating a file using javascript

Unable to utilize the ng-disabled directive

How is the rendering of a confirm/alert decided?

"Exploring the benefits of using nested mapping for res.json() in an Express application

Creating a list that renders responsively using ReactJS

Using JavaScript to interact with text elements in external SVG documents

What are the benefits of using async if I must also utilize await in my code?

Interacting Between PHP and Javascript

Tips on deleting information from an object by utilizing Chrome storage mechanisms

What is the reason behind only the initial click boosting the vote count while subsequent clicks do not have the same

Processing files from input file

What repercussions come from failing to implement an event handler for 'data' events in post requests?

The parseJSON function is not compatible with AJAX requests

What causes variations in running identical code between the Node environment and the Chrome console?

The Javascript function I created references a variable that seems to be undefined in the code

Designing geometric forms using the vertices of a Sphere in ThreeJs