Calling backend functions async

I am having a lot of difficulty calling a backend function async while in a loop and am looking for advice on if there is a better way of doing this. I am having difficulties wrapping my brain around the whole sync / async concept as it doesn’t exist with what I am used to.

I have a dataset that is populating information correctly on a dynamic page. I am getting all relevant information in it. As well as having some reference fields within the collections that are also coming in quite nicely.

The problem starts in that I likely need to do some unit conversions between what is stored in 1 collection vs what is stored in another. For example data stored in one collection 1 will likely be per 100 grams. While data stored in collection 2 may call for 16 ounces of that same item. So I would need to convert all the data found in collection 1 to the units found in collection 2.

I have the backend module working fine, and I can pass data into it in this format convert(100,‘g’,‘oz’) and I can get how many ounces 100 grams is then I just need to do a bit of math to get this to what my factor is.

However this is what I see sometimes


export async function ingredients_ready() {
var totalCalories = 0
var totalProtein = 0
var totalFat = 0
var totalCarbs = 0
var servings = 0
$w( ‘#ingredients’ ).getItems( 0 , $w( ‘#ingredients’ ).getTotalCount()).then(ingredients => {
for ( var i = 0 ; i < $w( ‘#ingredients’ ).getTotalCount(); i++) {
convert(ingredients.items[i].ingredient.calories, “g” , “oz” ).then(newValue => {
console.log(newValue)
})
}
})
}

This is one of the things I am trying. The “g” and “oz” are just there temporarily while testing


here is what the ingredients object looks like.

the top level collection is the amount called for in the recipe. Under unit I have unit info stored instead of just plain text, and under the ingredient I have the amount listed per 100 grams.

So basically what I need to do is

  1. loop through each element in the collection
  2. get the data for each element in the collection applying conversions as needed (it may be none but that is all checked for in the backend module)
  3. sum up all the data and display it to the user

I guess I could do this all in one massive query of some kind I am guessing though that seems unwieldy to me. My hunch is I am doing something wrong with the then() or in timing things correctly as my results are inconsistent. Sometimes I get data and sometimes I don’t.

I can share some of the convert code if needed. I tried using something already existing but it is written in a different javascript and I couldn’t figure out how to get chained prototyping working correctly like convert(100).from(‘oz’).to(‘g’) is the syntax it used so I just started making my own (much worse) version

Edit:
I also noticed one additional issue.

The units reference works different ways in what data is returned.
“ec023fca-abdc-4184-bf1a-cc8b4d9a3a16”
is returned for the baseUnit while the unit is returning the actual reference. Is there a maximum depth to references allowed? If so I may need to rethink my approach