Async, Promises, Await issue

Ask the community
,
1

Hi All,

I’m trying to get a data query to wait before continuing with the rest of the code. I read the Wix “Working With Promises” page and used their code as the basis for the following.

What I want is the results from the queries to display first once they’ve completed, then the variable “test” should display.

No matter what I do, the Test variable always get displayed first. Later I need to join variables with data from the queries. If I do that now, it fails as all the queries haven’t completed and return undefined.

What I am missing, what I am doing wrong? Any help and feedback is very much appreciated.

Many thanks,

Andy.

Noted edited 29-04-2020 regarding Giri’s comments.

import wixData from ‘wix-data’ ;

$w.onReady( function () {
});

function GetData(postcode) {
return wixData.query( “ForecastDataTable” )
.eq( “postcode” , postcode)
.find()
.then( (results) => {
return results.items;
})
}

export function button2_click(event) {

let test = “Hello World!”

GetData( “SE” )
.then(item => console.log(item));

console.log(test)

}

2

I this the actual code? Because it looks strange: you have a $w.onReady inside a button_click.

3

Apologies Giri, you’re spot on, I’ve pasted in the wrong version, this is the one I had as a guide from Wix article on working with promises. I’ll get the actual code shortly and update here. Thanks for pointing this out, much appreciated.

4

Edited the code sample to the actual code, rather than the template code I’d mistakenly included before.

5

I edited your GetData function a bit, removed the “return” before wixData.query
and i defined result to a variable before returning it.

function GetData(postcode) {
wixData.query( “ForecastDataTable” )
.eq( “postcode” , postcode)
.find()
.then( (results) => {
let r = results.items;
return r;
})
}

here i added an async to the function
and a wait before the GetData
now it should go it the right order

export async function button2_click(event) {
await GetData( “SE” )
.then((item) => {
console.log(item)
});
let test = “Hello World!”
console.log(test)
}

6

Many thanks for this Kristof, much appreciated!

I’ve tried, but now it doesn’t return any data, it’s as if it’s waiting permanently. I put a console.log(“Started…”) in immediately after the button click, to show the event is working and that the code beings, but it’s now waiting forever and no data returned.

I didn’t realise I could make the button function an async one, I’ll look further into that too i.e. export async function button2_click(event) This is good to know.

Thanks again, any other thoughts on why it’s now not returning results?

7

Hi Kristof, I’ve had a further tweak for your code and it’s working perfectly now, THANK YOU! This has been driving me crazy!!! The key was I didn’t realise I could make the button function an async one then add the wait into the button code.

This is what I’ve got working now, thanks to you.

import wixData from ‘wix-data’ ;

$w.onReady( function () {
});

function GetData(postcode) {
return wixData.query( “ForecastDataTable” )
.eq( “postcode” , postcode)
.find()
.then( (results) => {
return results.items;
})
}

export async function button2_click(event) {

let test = “Hello World!”

await GetData( “SE” )
.then(item => console.log(item));

console.log(test)

}

8

@andydavidson1965
Hi Andy,
Ii’m glad it helped you make it work.
i’m kinda new to the wix coding myself but i’m glad i can help where i can.

kristof.

9

@volkaertskristof Thank you again, you certainly did help! I was stuck! It was adding that async bit before the function on the button, that was the eureka moment for me!!! I’d not been doing that!