The dropdown menu remains static even after the data has been refreshed, as a result of simultaneous calls from two different APIs

this.rateService.deleterateSheet(formattedData).toPromise().then(
      rateData => {
        alert('deleting')
        this.rateService.gettingRates(this.accountId).toPromise().then(
          ratesData1 => {
            this.rates = (ratesData1['data']);
            this.snackBar.open('RateSheet Deleted', 'OK', { duration: 3000});
          }
        );

      }
    );

Progress achieved!

Farewell to the alert option.

Are there any alternatives rather than using delay to pace my second API call in Angular 5?

I relied on alert to slow down my API calls.

I attempted both delaying and utilizing a regular method separately. It didn't yield positive results.

Seeking a better approach!

Answer №1

Your code can be updated as follows:

this.dataService.updaterate(formattedData).toPromise().then(
      newData => {
            this.dataService.refreshData(this.userId).toPromise().then(
              refreshedData => {
               const index = this.rates.indexOf(this.rate_name);
               this.rates.splice(index, 1);
              }
            );

      });

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

Is there a way to modify the id parameter in the URL using Angular 2's ActivatedRoute?

How can I modify a parameter in the URL without altering the overall address? https://i.stack.imgur.com/LOd4T.png This is the TypeScript code that I currently have: onRowClicked(event: any) { let currentIdPerson = event.data.IdPerson; } I am trying ...

Transfer files seamlessly between different APIs

Is it possible to directly transfer thousands of files (images, pdfs) from one third-party API service to Google Drive API without the need for intermediate storage like an AWS S3 bucket? I already have authentication set up for both APIs. I am considerin ...

What is the reasoning behind not allowing an empty object as the initial value for hooks?

I am encountering an issue with my setProd Hooks. export interface faceProduct { readonly title: string; readonly prodState: string; readonly shipping: string; readonly sold: string; readonly alt: string; readonly material: string; readonly ...

Tips for bringing in an enum from TypeScript?

I am working with a module defined in TypeScript that looks like this: declare module MyTypes { export enum MyEnum { GOOD = 'Good', BAD = 'Bad', UNKNOWN = '-' } export interface MyType1 { ...

Ways to increment view count every time an endpoint receives a GET request

Currently, I am in the process of developing a REST API using Django rest framework. Here is an example of one of the models I am working with: class Feed(models.Model): id = models.BigAutoField(primary_key=True) title = models.CharField(max_lengt ...

Encountering an issue with RSpec specifically for the PUT method, however, POST requests are

Running a POST request in my specs goes smoothly with the code below: before do request_payload = { player: { first_name: "Joe", last_name: "Carradine", team_id: "1" } } post :create, re ...

Angular 7 - ALERT: Circular dependency identified:

Suddenly, a lightbulb went off in my head. I encountered two warnings while running ng serve: WARNING in Circular dependency detected: src\app\_services\ignore-interceptor.service.ts -> src\app\_services\index.ts -> sr ...

What could be causing the undefined value of this Angular class property?

Currently, I am working on an Angular project that aims to create lobbies for various web games. The concept is to gather players through the application so that a web game can be initiated quickly. However, I have encountered an issue where data retrieve ...

Enhance the Next.js higher-order authentication component by including extra data in the return

Below is the code snippet I am working with: export const requireAuth = (gssp: GetServerSideProps) => { return async (ctx: GetServerSidePropsContext) => { const { req } = ctx; let session = null; if (req?.headers?.cookie) { sessi ...

The TypeScript compilation failed for the Next.js module

Working on a project using Next.js with typescript. The dev server was running smoothly, and I could see frontend changes instantly. However, after modifying the next.config.js file and restarting the server (later reverting the changes), compilation issue ...

How to trigger a click event in React using TypeScript and material-ui library

Currently, I am facing an issue when trying to update the value of material-ui TextFields from the store. When manually typing inside the field, everything works fine as expected with the handleChange() and handleBlur() functions handling the events. Howev ...

Retrieving information from a JSON web service can easily be done using just JavaScript and jQuery

I recently downloaded a sample application from the following URL: . I am pleased to report that the part I have implemented is functioning flawlessly: <script src="scripts/jquery-1.3.2.debug.js" type="text/javascript"></script> <script src ...

Improve the presentation of Array<T> as T[]

I am currently working on a project using React TypeScript, and I have been utilizing Prettier to help me format the code. Within my TS files, I have several interfaces that utilize Array<T>, but I would like to reformat it to T[]. Is there a way fo ...

Aurelia CLI encounters difficulty importing chart.js when using TypeScript

Currently, I am utilizing typescript with aurelia/aurelia-cli. After npm installing chart.js, I proceeded to add it to my aurelia.json file like so: "dependencies": [ ... { "name": "chartjs", "path": "../node_modules/chart.js/d ...

Unable to import an empty class, encountered error TS2307: Module 'menu' not found

I'm facing an issue where I am trying to import a basic, empty exported class. It seems like the file cannot be located even though it is in the same directory as the class that is importing it. I have looked up similar error messages on Google, but n ...

Access to this page via the Odesk API in node.js is restricted and unauthorized

/** * Here is an example of how to use the oDeskAPI * * @package oDeskAPI * @since 09/22/2014 * @copyright Copyright 2014(c) oDesk.com * @author Maksym Novozhylov <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data ...

What is the best way to extract and connect data from a JSON file to a dropdown menu in Angular 2+?

Here is an example of my JSON data: { "Stations": { "44": { "NAME": "Station 1", "BRANCH_CD": "3", "BRANCH": "Bay Branch" }, "137": { "NAME": "Station 2", ...

Challenges arise with data updating following a mutation in @tanstack/react-query

As I work on building an e-commerce website using React, I have a specific feature where users can add products to their favorites by clicking a button. Following this action, I aim to update the profile request to display the user's information along ...

Acquiring the API through the callback function within a React application

I wrote a function that connects to an API and fetches data: import {API_KEY, API_URL} from "./constants"; export const getOperations = async (id, successCallback) => { try { const response = await fetch(`${API_URL}/tasks/${ ...

Encountering an error in Jest with TypeScript (Backend - Node/Express) that reads "Cannot use import statement outside a module

Currently, I am in the process of developing Jest tests for a Node/Express TypeScript backend. Recently, I came across the concept of global test setup which I am integrating to streamline the usage of variables and function calls that are repeated in all ...