How to force AngularJS to execute function and its sub function in a order

Question

How can I execute the below code so that I can display each flavor and its each ITEM ID details in a sequence.

Format of execution :

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 some post are suggesting callback() and promise() but not sure how to use them in subfunction.

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

function GetItemIDs_ofeachFlavor(MapFlvID) {
    getItemIDs_ofeachFlavor(MapFlvID).then(function () {    // API call will get ITEMID's of a 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 will get each ITEM ID details
         ItemDtls = $scope.ItemDetails;
         Content = '<table style="width:100%">';
         Content += '<tr> <td> ...ItemDtls.ITEMNAME'; ...; ......; 
    })
}

Answer 1

I'm not sure what exactly you want to achieve, but i suggest to take the time and effort to learn the async-await syntax. Basically, it allows you to write async code in "sync fashion". This would look something like that, in your case:

(async()=>{
    const  flavors = await getFlavours();//Await some promise

    const itemIds=[]

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

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

        //Do something with details..
    }


})()

Basically you await, in sequence, for each "promise" to be resolved, get it's data, and then do something with it.

In order to understand this mechanics, make sure you have a good grasp of Promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

And then you can read about async-await: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

Note that this whole thing is only relevant/useful when you're dealing with a-synchronous code, like fetching data via AJAX, which you seem to be doing here.