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'; ...; ......;
})
}