Tips for making sure AngularJS runs a function and its subfunction sequentially

Question

Tips for making sure AngularJS runs a function and its subfunction sequentially

How do I run the code below to display the details of each flavor and its corresponding ITEM ID in a specific order.

Execution Format:


Flavor1, Flavor2 -- Getflavors()
Flavor1
ITEM1, ITEM2... -- GetItemIDs_ofeachFlavor(MapFlvID)
GET ITEM1 DETAILS and add it to Content - GetItemID_Details(ITEM_ID, FLAVOR_ID)
GET ITEM2 DETAILS and add it to Content - GetItemID_Details(ITEM_ID, FLAVOR_ID)
Flavor2
ITEM1, ITEM2... -- GetItemIDs_ofeachFlavor(MapFlvID)
GET ITEM1 DETAILS and add it to Content -- GetItemID_Details(ITEM_ID, FLAVOR_ID)
GET ITEM2 DETAILS and add it to Content -- GetItemID_Details(ITEM_ID, FLAVOR_ID)
....
....
DISPLAY Content

Code:

I've seen suggestions for using callback() and promise(), but unsure how to implement them in subfunctions.


Getflavors() {
   getFlavors().then(function () // API call to fetch flavors
      Flavors = $scope.Flavors;     
      Flavors.map(function (element) {    
          GetItemIDs_ofeachFlavor(element);
      }
   })
}

function GetItemIDs_ofeachFlavor(MapFlvID) {
    getItemIDs_ofeachFlavor(MapFlvID).then(function () {    // API call to get ITEM IDs of each flavor
        ItemIDsofeachflavor = $scope.ItemIDsofeachflavor;   
        GetItemID_Details(ITEM_ID, FLAVOR_ID);
    })
}

function GetItemID_Details(ITEM_ID, FLAVOR_ID) {
     getItemDetails(ITEM_ID, FLAVOR_ID).then(function () {    // API call to fetch details of each ITEM ID
         ItemDtls = $scope.ItemDetails;
         Content = '<table style="width:100%">';
         Content += '<tr> <td> ...ItemDtls.ITEMNAME'; ...; ......; 
    })
}

javascript angularjs angular-promise angular-http

Answer 1

Answer №1

If you're unsure about your goal, I recommend investing time in learning the async-await syntax. This allows you to write asynchronous code in a synchronous manner. In your specific case, it would look something like this:

(async()=>{
    const flavors = await getFlavours();//Waiting for a promise

    const itemIds=[]

    for(let flavor of flavors){
       const itemId =  await getItemIDs_ofeachFlavor(flavor.id);//Awaiting a promise for each flavor
       itemIds.push(itemId);    
    }

    for(let itemId of itemIds){
        const details  = await getItemDetails()

        //Perform actions with details..
    }


})()

Essentially, you await the resolution of each promise sequentially, retrieve its data, and then work with it.

To comprehend this process, ensure you have a solid understanding of Promises: Link to Promises Documentation

Following that, you can delve into async-await: Link to async-await Documentation

Additional info on Await Operator

Remember, this approach is most useful when dealing with asynchronous tasks like AJAX data fetching, as it appears you are doing here.

Answer 2

If you're unsure about your goal, I recommend investing time in learning the async-await syntax. This allows you to write asynchronous code in a synchronous manner. In your specific case, it would look something like this:

(async()=>{
    const flavors = await getFlavours();//Waiting for a promise

    const itemIds=[]

    for(let flavor of flavors){
       const itemId =  await getItemIDs_ofeachFlavor(flavor.id);//Awaiting a promise for each flavor
       itemIds.push(itemId);    
    }

    for(let itemId of itemIds){
        const details  = await getItemDetails()

        //Perform actions with details..
    }


})()

Essentially, you await the resolution of each promise sequentially, retrieve its data, and then work with it.

To comprehend this process, ensure you have a solid understanding of Promises: Link to Promises Documentation

Following that, you can delve into async-await: Link to async-await Documentation

Additional info on Await Operator

Remember, this approach is most useful when dealing with asynchronous tasks like AJAX data fetching, as it appears you are doing here.

Tips for making sure AngularJS runs a function and its subfunction sequentially

Answer №1

Similar questions

Identifying when two separate browser windows are both open on the same website

Having trouble with test coverage in Mocha using Blanket?

Error encountered in a Node.js Express application: 'Error in Jade template (version 1.0+): The usage of duplicate key "id" is not permitted.'

Setting null for HttpParams during the call

The deletion function necessitates a switch from a server component to a client component

Issue with the scope of Bootstrap Accordion

The $rootScope object cannot be accessed in the controller

Maven, Protractor, and Selenium WebDriver team up for efficient integration testing

Horizontal Panning Feature for D3 Horizontal Bar Charts

Tracking Time Spent in a Tab using HTML and JavaScript

Submitting a form in Rails without refreshing the page and dynamically updating the view

Alert: Next.js 13 console error detected

Organizing the directory layout for the /profile/username/followers route in NextJs

Can TypeScript and JavaScript be integrated into a single React application?

Real-time list refreshing using ng-repeat

Unable to view text in Angular 1.5 controller

Angular select tag failing to display input data accurately

What is the best way to divide an array while extracting data from a JSON object using

Is there any more Angular code to be bound using ng-bind-html or ng-bind?

IE does not support hover effects