AngularJs triggers a function once two distinct https requests have been completed

If I have two HTTP requests that I need to be called asynchronously, but both must be completed before rendering my view, how can I ensure that these two separate calls are done in order to trigger a specific function? Calls 3 and 4 can continue running in the background without waiting for them to finish.

Here is an example code snippet:

var call1_done = false;
var call2_done = false;
var call3_done = false;
var call4_done = false;

API.get_client().then(function(){
    call1_done = true;
});

API.get_all_clients().then(function(){
    call2_done = true;
});

// Ignore calls 3 and 4 as they can continue running in the background
if (call1_done && call2_done)
{
   render_the_page();
}

Answer №1

If you're not keen on using $q.all([]), consider utilizing $watch instead.

 $scope.calls = {
   call1_done: false,
   call2_done: false
 };

API.get_client().then(function(){
    $scope.calls.call1_done = true;
});

API.get_all_clients().then(function(){
    $scope.calls.call2_done = true;
});

/* 2 and 4 async tasks are running ..... */

$scope.$watch(function () {
    return $scope.calls;
},
function (newValue, oldValue) {
    if(newValue.call1_done && newValue.call2_done ){
      render_the_page();
     }
}, true);

In this scenario, we are monitoring an object that holds two flags, triggering render_the_page() only when both flags are set to true.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The continuous loop is triggered when attempting to pass array data from the API

Hello, I have been searching for a solution to my current issue without much success. The problem revolves around retrieving dates from Firebase and populating them into UI elements in my Vue app. My end goal is to align each date with the corresponding mo ...

Passing resolved data from a parent state to a nested view in Angular UI Router

Currently, I am developing an Angular web application that will showcase various financial events for the user. These events are categorized under a single ID and grouped into different categories. Each group needs to have its own HTML <table> for di ...

Despite the div condition not being met, the code inside the div is still being executed

Even when the condition of the div is not met, it still runs the code within the div. <div ng-if = "1==11"> nishant <td><a href="indexForm.jsp?id={{x.id}}" class="btn btn-prima ...

What is the correct way to apply styles universally instead of using "*" as a selector?

With Nextron, I was able to successfully run my code, but upon opening the window, I noticed that the body tag had a margin of 8px. Although I managed to change this using the dev tools, I am unsure how to permanently apply this change in my code. When att ...

Send the typeahead object result from Angular to another function within the controller

In my current setup, I am utilizing the ui-bootstrap typeahead feature to fetch an object from an external API. Upon selecting the object, it triggers a callback function that stores the results in a separate function within my controller. The challenge l ...

Utilizing ng-grid to pass variables within cellTemplate

My ng-grid is connected to a SharePoint list, but I'm facing an issue where the list returns an ID number instead of the user name when populating a field with a user name. To solve this issue, I have created a function that converts the ID to a user ...

Attempting to maintain the main navigation highlighted while browsing through the secondary navigation

I am facing a small issue that seems like it should be an easy fix, but I can't seem to figure it out. While working on my site, I'm having trouble keeping the parent navigation highlighted when scrolling through the sub-menu. If you hover over ...

What is the best way to transfer the $rootscope, which contains numerous parameters, to a state in AngularJS's UI-Router?

Hey there, I'm a new developer facing an issue with passing a root-scope parameter to my state using UI-Router. Here's the original href that I'd like to convert to ui-sref: href="/mycarts/{{cats.id}}?{{$root.filterParams}} This is the st ...

What is the process for creating a global variable in JavaScript?

Having trouble changing the value of "invocation_num" within a loop? I attempted to modify it as follows, but ended up with an undefined value. Any help would be greatly appreciated. $(document).on("click", '.favoret', function(){ document ...

Python-JavaScript Integration Problem

I'm a beginner when it comes to Javascript, Python, and PHP. In my Javascript program, I have a button that triggers a Python script and displays the returned value on the screen. My goal is to steer clear of using Jquery and Json. Here are the snipp ...

Angular router.redirect is not able to pass variables as expected

I am facing an issue with the router redirect and template lifecycle while using Stripe checkout in my Angular 5 project. After a user signs up, I trigger the stripe checkout modal. Once the modal receives a payment source token, I perform some additional ...

Strategies for handling asynchronous requests and effectively presenting the retrieved data

On my HTML page, I have a badge component that shows the number of unread messages. Here is the HTML code: <button class="font" mat-menu-item routerLink="/message"> <mat-icon>notifications</mat-icon> <span [matBadgeHidden]="newM ...

Interacting with a card in vuejs won't trigger any action

Is there a way to make an overlay disappear when clicking anywhere on the screen except for a specific card positioned on top of it? The current setup makes the overlay disappear even when the card is clicked. How can this behavior be corrected? <div ...

Tips for avoiding errors when determining the length of a child node in Firebase within a vue.js application by utilizing the "Object.keys" function

Let's envision a Vue.js application where the data structure stored in firebase looks something like this: item: { name: itemName, childOne: { subChildA: true, subChildB: true }, childTwo: { subChildA: true, subChildB: true ...

The Jquery calculation feature sometimes mistakenly adds an incorrect value before calculating the correct value

Working on a calculator that accurately computes the field price and displays it, but facing an issue where the correct answer seems to merge with another value (likely from data-price as they match). Snippet of the code: var updateTotal = function() { ...

I am facing an issue where reducing the size of the renderer is causing my click events to be offset. What steps can I

At the moment, my rendered model (which is grey in color) stretches across the entire width of the html page with the mesh centered within that width. I want to reduce this width but when I do so, the click event on the model seems to be misaligned. Three. ...

Ensure that parameters are validated correctly in the Next.JS application router using the searchParams method

When building the page, I need to properly validate params in the Next.JS app router using searchParams. My goal is to show a main image (coverImage) for each photo on the /gallery page. When a photo is clicked, I want to display more photos of the same k ...

Determine the class name of an element when it is clicked on

For various reasons, I am unable to use $('.class').click or on('click', function..) Therefore, I must utilize the onclick="" event from the html element. Is there a way to determine the class of the element where the onclick event oc ...

Implement the parent jQuery library within a child iframe

I have a query regarding the use of two iframes in my HTML page. I am trying to implement a single jQuery file that is loaded on the parent page. The code snippet provided below works perfectly on all browsers, except for one issue with Chrome when using t ...

Attempting to implement usedispatch hook in combination with userefs, however, encountering issues with functionality

I've been exploring the Redux useDispatch hook lately. I created a simple app for taking notes in a todo list format. However, I am facing an issue with useDispatch as it's not working for me and I keep encountering this error: Module build faile ...