Work with then/await

Ask the community
,
1

I have a page that needs to get data from an third party api, then get data from wix collection,
and only after those two functions finished to execute manipulating the data.

The problem is that the function that needs to manipulate the data is executing before the get data functions is finishing the execute, the arrays they fill are empty and the manipulate isn’t really happening.

I tried to use then(), async and await. but still didn’t succeed.

Adding pictures of the code

Please help to to understand what am I missing here?
Thanks.

Using then():

$w.onReady(function () {

    // query the collection to get data
    yachtsFromDB = getSavedData();

    // query the third party api to get data
    getYachtListFromCYA(parametersFromHomePage).
        then(results => {

            // manipulate the data
            filterYachtsToShow();
            setMenuAfterTheHomePageQuery(); 
            fillReapeaterData();
            paginationSetup();

            $w("#image64").hide();
            $w("#repeater1").show();
        });

}

Using async and await

$w.onReady(async function () {

    // query the collection to get data
     yachtsFromDB = await getSavedData();

    // query the third party api to get data
     yachtData = await getYachtListFromCYA(parametersFromHomePage);
       

    // manipulate the data
        filterYachtsToShow();
        setMenuAfterTheHomePageQuery(); 
        fillReapeaterData();
        paginationSetup();

        $w("#image64").hide();
        $w("#repeater1").show();
}
2

First: Read this documentation

Second: I like to use this statement

Promise.allSettled([promiseOne(), promiseTeo()])
.then(([resultOne, resultTwo]) => {
//RUN AFTER
});

Because you can call multiple promises at the same time, running independently and the code inside “RUN AFTER”, runs after all the promises have been fulfilled.

Third: On your examples, the data retrieved from the promises and stored in the variables " yachtsFromDB" and " yachtData " it’s not passed to the other functions. Are you sure these variables are been used inside the queries u use to manipulate data?

Fourth: On your first example the first query is used without .then and without await, therefore the next line of code will run nonasync

3

Hey MDM, Thanks for your reply!
Second: I tried to use the function Promise.allSettled() with no luck
I modified the getSavedData and getYachtListFromCYA functions to modify the globals arrays instead of return new array equals to the globals arrays,
The “RUN AFTER” part is still running before both functions finished to execute.
Adding the code here:

$w.onReady(async function () {

    Promise.allSettled([getSavedData(),         getYachtListFromCYA(parametersFromHomePage)])
        .then(([resultOne, resultTwo]) => {
        filterYachtsToShow();
        setMenuAfterTheHomePageQuery(); 
        fillReapeaterData();
        paginationSetup();

        $w("#image64").hide();
        $w("#repeater1").show();
    });
});

Third: The variables “yachtsFromDB” and “yachtData” are globals and they are used in every function in the code.
Fourth: I also tried with multiple .then() calls and it didn’t work.

4

For an explanation of Promises, see these two articles:

However, you don’t explain what the functions do that you are calling. It could be that the functions themselves are not being. What does getSavedData() do and how? And what does getYachtListFromCYA() do? Do you know that they are functioning correctly?

5

@yisrael-wix Thanks for your replay!
getSavedData() - executes a query to collection and fills array with data.
getYachtListFromCYA() - executes backend fetch function and fills array with the data.

I read the documentation about promises and working with promises but It didn’t help me to fix the problem.

I was able to achieve my goal with “setTimeout” function but it is only temporary solution, that’s why I can say for sure both functions are functioning correctly.

6

Please post the editor URL of your site. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.

7

Hi Yisrael,

The relevant page is Test

Thank you!

8

In the function getSavedData() , you have the return yachtsFromDB; statement in the wrong place, and it will not return anything. It should be inside the query’s then() function.

9

Thanks for your reply!
Fixed it but the rest of the code still running before the functions is finishing to execute.

10

You also need to make sure that in the backend, you properly return the results in the .then(). See Returning in a .then( ) .

11

Hi @yisrael-wix ,
Hope you are doing well. I am sorry, My question is not relevant to this post. You posted google sheet npm long time ago and shan use that method for google calendar. I used his method to configure google calendar for client. But my client doesn’t want that long process for his website.
The process of his website is, certified members can only login and add their services. Users see their profiles and services and book it for 1 hour. That booking goes to calendar and for that, I configured the Google calendar.
Could you please help me to solve this problem? My client wants it on one click.

12

I am doing just fine - thanks. And you are correct, this question is not relevant to this post. Instead of hijacking a thread, you should create your own post, explain what you are trying to accomplish, what you have, what works, and what doesn’t. Share any code you might have.

You should also realize that the Google Sheet example is merely to illustrate how external service can be used. Wix cannot provide support for accessing these services - you will have to work out the coding for this. If you need help with this, you can check out of the Wix Marketplace for Corvid experts.

13

Hey Yisrael! Thank you for your replies,
This is my backed fetch function :

export function getYachtList(variables) {
 
 const url = "******"
 const finalUrl = url + variables;

 return fetch (finalUrl, {method: 'get'})
        .then(response => response.json());
}

I couldn’t find the solution for why the functions is still executing before the data functions, appreciate your help.

14

@orhirschhorn14 As I mentioned before, y ou need to make sure that you properly return the results in the .then() . Something like this:

    .then( (response) => { return response.json(); });