Force javascript to execute function and its sub function

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 = '';

            Content += '

...ItemDtls.ITEMNAME'; ...; ......;

   })

}