How to wait for secondary fetched result with JavaScript when the result of a primary fetch is a specific value within a loop?

Question

Within a timer called javascript function I need update a UI using several json API calls. It's an energy meter which stores the actual consumed phase power in 3 different registers. Except for negative values (energy by solar panels), this returned energy is stored in 3 other registers (as a positive value). If phase power is 0, I need need to fetch the alternate phase power register.

Loop 3 times
  Fetch A at api1
  If A=0 Then
    Fetch A at api2
  Display A
  Display min(A)
  Display max(A)
  Display trend
  Even more display stuff I don't want to duplicate

I manage to fetch the value, however can't get the alternative fetched value to survive below the fetch block. Display A = 0 when fetching api2 (which returns not 0).

I tried async and await, like Javascript - How to use fetch inside a for loop and wait for results. Thus change 2 lines in the code below:

async function update()
…
                        await fetch(APIGW+"v1/sm/fields/power_returned_l"+myPhase)

That results in:

Uncaught SyntaxError: await is only valid in async functions and async generators
Uncaught ReferenceError: update is not defined

How to make the bottom document.getElementById (and loads of UI stuff below) to wait for the 2nd level (not the 2nd loop) fetch when this if (nvKW == 0 ) block is executed?

function update()
{
    var phase;
    for( let phase = 1 ; phase <= PHASES ; phase++ )
    {
        fetch(APIGW+"v1/sm/fields/power_delivered_l"+phase)
        .then(response => response.json())
        .then(json => 
          {
            for( let j in json.fields ){
                if (json.fields[j].name.startsWith("power_delivered_l"))
                {
                    myPhase = Number(json.fields[j].name.replace('power_delivered_l',''));

                    let nvKW=Number(json.fields[j].value)
                    if (nvKW == 0 ) // check if power is generated
                    {
                        fetch(APIGW+"v1/sm/fields/power_returned_l"+myPhase)
                        .then(response => response.json())
                        .then(json2 => 
                          {
                            for( let jr in json2.fields ){
                                if (json2.fields[jr].name.startsWith("power_returned_l"))
                                {
                                    let nvKW=-1*Number(json2.fields[jr].value)
                                    console.log(json2.fields[jr].name+" = "+ nvKW.toString()) // here nvKW contains a value
                                }
                            }
                          }
                        );
                    }

                    console.log("nvKW = "+ nvKW.toString()) // 1st level fetch = 0 and 2nd level fetch != 0 then nvKW is still 0 here, where I need the value from the 2nd level fetch
                    document.getElementById(json.fields[j].name).innerHTML = nvKW.toFixed(1);
                    // a lot more ui stuff is done below

Answer 1

Using .then() syntax on a conditional promise:

json => {
    const field = getFieldByName(json, "power_delivered_l");
    const myPhase = field.name.replace('power_delivered_l','');
    (field.value == 0 // check if power is generated
      ? fetch(APIGW+"v1/sm/fields/power_returned_l"+myPhase)
        .then(response => response.json())
        .then(json2 => getFieldByName(json2, "power_returned_l", -1))
      : Promise.resolve(field)
    ).then(({name, value: nvKW}) => {
         console.log(`${name} = ${nvKW}`)
         document.getElementById(json.fields[j].name).innerHTML = nvKW.toFixed(1);
         // a lot more ui stuff is done below
    });
}

Using async/await:

async json => {
    let field = getFieldByName(json, "power_delivered_l");
    if (field.value == 0) // check if power is generated
        const myPhase = field.name.replace('power_delivered_l','');
        const response = await fetch(APIGW+"v1/sm/fields/power_returned_l"+myPhase);
        const json2 = await response.json())
        field = getFieldByName(json2, "power_returned_l", -1))
    }
    const {name, value: nvKW} = field;
     console.log(`${name} = ${nvKW}`)
     document.getElementById(json.fields[j].name).innerHTML = nvKW.toFixed(1);
     // a lot more ui stuff is done below
}

Both using a helper function

function getFieldByName(json, prefix, factor = 1) {
    for (const field of json.fields) {
        if (field.name.startsWith(prefix)) {
             return {
                 name: field.name,
                 value: factor * Number(field.value)
             };
        }
    }
    throw new Error(`Did not find field '${prefix}' in the JSON`);
}

Answer 2

Then use an else:

function updateUIwithA(A){
   //Do whatever you need to update UI from A
   //document.getElementById("fieldNameForDisplayAValue").innerHTML = getValue(A);
   //document.getElementById("fieldNameForDisplayAMin").innerHTML = getMin(A);
   //document.getElementById("fieldNameForDisplayAMax").innerHTML = getMax(A);
   //document.getElementById("fieldNameForDisplayAverage").innerHTML = getAverage(A);
}


                    ...
                    let nvKW=Number(json.fields[j].value)
                    if (nvKW == 0 ) // check if power is generated
                    {
                        //First power is 0, then fetch the second power
                        fetch(APIGW+"v1/sm/fields/power_returned_l"+myPhase)
                        .then(response => response.json())
                        .then(json2 => 
                          {
                            for( let jr in json2.fields ){
                                if (json2.fields[jr].name.startsWith("power_returned_l"))
                                {
                                    //Show second power
                                    let nvKW2=-1*Number(json2.fields[jr].value)
                                    console.log(json2.fields[jr].name+" = "+ nvKW.toString()) // here nvKW contains a value
                                    updateUIwithA(json2);
                                }
                            }
                          }
                        );
                    } else {
                       //First power is not 0, so show the current value and ignore second fetch
                       updateUIwithA(json);
                    }