How to properly put query calls in sequential order (Might be an async task)

Ask the community
, , ,
1 
 Backstory: So our site has an Order Storage database and a Virtual Closet database. For every customer that buys a box (or boxes) from us, the order is stored in the Order Storage DB. The business ships our members some boxes to store anything in and we store that in a warehouse. Well, we have a separate database for allowing our customers to enter a name and description to describe the contents box (which they fill in on the physical sticker and online in the Virtual Closet DB). When the member wants to retrieve their box, they are able to then find out which box is which a lot easier if they have multiple boxes stored since their physical stickers match what is in the online database.  

 The 'What's Inside' page displays a repeater, and within the repeater is a Box Name input box and Box Contents input box which displays what the box names and contents are, respectively. However the repeater is connected to the Virtual Closet DB which may not have been populated yet and so I've added Wix Code that gets the number of boxes ordered per customer from the Order storage DB and the number of 'digital stickers' in the Virtual Closet DB, and if there are no entries in the Virtual Closet DB then we insert X amount of times into the Virtual Closet DB with just the customers Email, and blank entries for the Box Name and Box Contents so the customer can edit the stickers directly on the 'What's Inside' page and then update the Virtual Closet database with the edited entries. 

 The problem arises when I do the query calls to get the number of entries for both databases. I need both variables to be calculated before I run code that will figure out how many entries need to be inserted into the Virtual Closet DB but my skills with working with Promises and Async Tasks are not to the level of understanding as I'd like it seems. I understand that when working with promises, you must wait to get the value from it so code after the query call is ran first, which is not what I want. I want sequential firing of the code so I turned to async tasking. However I am not sure it is working the way I want it to. I'm attaching a picture of the console log when we run the page, and if you look at the highlighted portion, there is console log text that I want to fire after the 2 queries finish but that is not happening and I don't know how to fix this. Also I am trying to save the number of entries for both query calls globally which I can't seem to figure out either.

1089×469 48.8 KB

I am pasting all the code from the ‘What’s Inside’ page below:

import wixUsers from 'wix-users';
import wixData from 'wix-data';

$w.onReady(() => {

    $w("#dataset1").onReady(async () => {
        console.log("Running getSizeOfVirtualCloset()");
 const email = await wixUsers.currentUser.getEmail();
 const num = await getSizeOfVirtualCloset(num);
        console.log("What is number of entries in Virtual Closet DB? "+num+" entries. I want this to run before log ID 1");
        console.log("log ID 1: THIS SHOULD RUN AFTER getSizeOfVirtualCloset()");
    });

 let userEmail = wixUsers.currentUser.getEmail().then(async (email) => {

 let order_data = wixData.query("123FormBuilder_3333677")
        .eq("Email",email)
        .find()
        .then(async (results) => {
 
 var totalBoxesPerCustomer=0;

 for(var index=0;index<results.items.length;index++){
 
 //console.log(results.items[index]);
 
 var numLargeBoxes = parseInt(results.items[index]["# of Large Box(es)"],10);
 var numMediumBoxes = parseInt(results.items[index]["# of Medium Box(es)"],10);
 var numSmallBoxes = parseInt(results.items[index]["# of Small Box(es)"],10);
 var numTinyBoxes = parseInt(results.items[index]["# of Tiny Box(es)"],10);
 
 try {
 var numBoxes = 0;
                    numBoxes = numLargeBoxes+numMediumBoxes+numSmallBoxes+numTinyBoxes;
 if(!isNaN(numBoxes)){
                        totalBoxesPerCustomer+=numBoxes;
                        console.log(totalBoxesPerCustomer);
                    }
                } catch (err) {
                    console.log("No box data to add up! Ignore.");
                }
            }

            console.log("Total boxes stored in Order Storage: "+totalBoxesPerCustomer);
 
 for(var entries=0;entries<totalBoxesPerCustomer;entries++){
 //console.log("Entry #: "+entries);
 //wixData.insert("VirtualCloset", {"email": email,"boxName":"","boxContents":""});
            }
        } ) 
        .catch( (err) => { 
 let errorMsg = err; 
        } );
        console.log("This code needs to run after the queries finish!!!");
      } )
});

async function getSizeOfVirtualCloset(email) {
 const results = await wixData.query("VirtualCloset")
        .eq("Email", email)
        .find();
 return results.items.length;
}

export function button1_click() {
 let repeaterData = $w("#repeater1").data;
    console.log(repeaterData);
}

As you can see, the console log call saying “This code needs to run after the queries finish!!!” is after the code to call the queries but as you can see it fires before the queries and I thought the async calls would allow the code to run in order. What am I doing wrong?
Thank you so much you all,
Nick