Help with scope of query variables

Ask the community
,
1

Can’t believe I am stuck on this (maybe I need more coffee!)

How do I get the scope of the query variable “x” to be available outside of the query?

let x=“test”;
console.log(x); //output=“test”

wixData.query(“portalMenu”)
.contains(“title”, “stg” )
.limit(500)
.find()
.then( (results) => {
x=results.items[0].textValue;
console.log(x); //this displays correct value for “textValue” from the db based on query
});

console.log(x); //output=“test”

Any help would be most appreciated!!!
Thanks

2

Does replacing " let " with " var " in the following line:

 let x="test";

resolve the issue for you?

3

Thanks for the quick response!!!
However…it is still not overriding the variable “x”.
I would expect the last two outputs of “x” to be the same.

4

Looking at, and then extrapolating from, https://www.wix.com/code/reference/wix-data.html#query, does the following work for you:

  1. Removing (or at least commenting out) the following line:
 let x="test";

and

  1. Replacing the following line:
         x=results.items[0].textValue;

with the following line:

         let x = results.items[0].textValue;

?

5

When I try this, the second “console.log(x)” line of code under the query throws and error in the Wix editor reading ‘x is not defined’. ‘x’ appears to be out of scope once I leave the query function even if I define it above the query function call. I have tried defining the variable ‘x’ (var x) at the page level (above the $w.onReady function) as well. When I do this and execute the code, then the “console.log(x)” line of code generates and “undefined” statement. What is interesting and may be a clue is that the “undefined” statement from the last console.log call prints out PRIOR to the textValue from the first console.log statement. Could it be that it is making it thru to the second statement prior to the DB returning the query results? Do I need some type of pause to get the results from the DB?

6

Surely there is someone out there that can help me with this one. I think I must be missing something very basic. I need to query the DB and get a variable that I can use elsewhere on the page as needed (outside the scope of the query). Thoughts?

7

OK…I finally figured it out for anyone that was curious. The key was the “async” identifier and the “await” identifier indicating to wait in an asynchronous fashion for the results from the database. Please advise if there is a better way, but this seems to work.

$w.onReady( async function () {

let x=“test”;
console.log("first call x = " + x); //output =“test”
const result = await wixData.query(“portalMenu”)
.contains(“title”, “stg” )
.limit(500)
.find()
.then( (results) => {
x=results.items[0].textValue;
console.log("second call x = " + x); //output = mydata from the DB
});

console.log("final call x = " + x); //output = mydata from the DB
}

8

Makes sense; that addresses the questions you had:

“Could it be that it is making it thru to the second statement prior to the DB returning the query results? Do I need some type of pause to get the results from the DB?”

9

Glad you were able to resolve it, Jay. I’ve wrestled with this over time, but I was always wanting to return the results of a query when a button was clicked or some other event occurred. It occurred to me now the way to do that working off of your example. The keys for this are to declare the variable at the top of the page so it has global scope relative to the page and have a chain of two async methods that get called as a result of a button click. The result of the query is then available at the end of the QueryTestCall method. In the wacky world of asynchronous code execution the value of x at the bottom of the button click code was still “test”.

let x=“test”;

async function QueryTest(){
const result = await wixData.query(“portalMenu”)
.contains(“title”, “stg” )
.limit(500)
.find()
.then( (results) => {
x=results.items[0].textValue;
console.log("second call x = " + x); //output = mydata from the DB
});
}

async function QueryTestCall(){
const queryresult = await QueryTest();
console.log("value of x at bottom of QueryTestCall method = " + x);
}
export function button1_click(event) {
QueryTestCall();
console.log("value of x immediately after button click = " + x);
}