UpdatingText Element using value from Database Query

Hi All,

I am trying to find a way to update the text of a text element on one of my pages using the result of a wixData query(), eq(), count(), then().

I am trying to assign the result of the query to a global variable declared outside the viewPortEnter function for the text element, but it won’t seem to assign. I have put various console.log() methods to print text to trace the execution and I think it isn’t executing in the order I would like.

Any ideas on how I could make it possible to update the text of a text element.

To make it more clear, i need:
-To query the database for certain results (three times)
-Use an if statement to determine which count was the largest
-Update the contents of a text element based on the largest count

Any help would be appreciated! <3

Hi,

Welcome to the Wix Code forums.

Please post your code so that we can inspect what you are doing.

Yisrael

Hi Yisrael,

So this is my code so fare:

var oweekNum;
wixData.query(“testData”)
.eq(“refferalMethod”,“O-Week”)
.count()
.then((num) =>{
oweekNum=num.valueOf();
}
);
console.log(“declare” + oweekNum);
export function text19_viewportEnter(event, $w) {
wixData.query(“testData”)
.eq(“refferalMethod”,“O-Week”)
.count()
.then((num) =>{
oweekNum=num;
console.log(oweekNum);
$w(“#text19”).text = oweekNum.toString();
}
);
console.log(oweekNum + “outside”);
}

Basically, I am trying to use the wixData query() and so on to pull the amount of times the values “O-Week” appears in my database. But it either executes too late or only passed a Promise to the variable when I need a number, to later be used to update the text element #text19.

The only success I’ve had is updating the element within the query(), eq(), count() execution, but I need to perform this for three different variables and then use an if statement to decide which one to show based on the most occuring value.

Hopefully this makes sense and thanks for your help!

Hi,

So it seems you have an idea of how Promises work. For further explanation…
For a gentle introduction to Promises, see the forum post Promises, Promises .
For a more comprehensive discussion of Promises, see the article Working with Promises in Wix Code .

I’m not sure what you were doing with the ViewportEnter event handler, so I’ll just ignore that for now. Your query is basically OK…

wixData.query("testData")
    .eq("refferalMethod", "O-Week")
    .count()
    .then((num) => {
        let oweekNum = num;
        console.log(oweekNum);
        $w("#text19").text = oweekNum.toString();
    }
);
console.log(oweekNum + "outside");

You properly retrieving the count (oweekNum) inside of the .then(), which is where the Promise is fulfilled.

So how do you handle the other values?

Just add queries for each of those fields and then in the .then() function call another function that decides what to do.

let oWeekNum = 0;
let oOtherNum = 0;

wixData.query("testData")
    .eq("refferalMethod", "O-Week")
    .count()
    .then((num) => {
        let oweekNum = num;
        console.log(oweekNum);
        $w("#text19").text = "" + setBiggerNumber();
    }
);

// add another query for oOtherNumber here

export function getBiggerNumber() {
    if(oWeekNum > oOtherNum) {
        return oWeekNum;
    }
    else {
        return oOtherNumber;
    }
}

So now you have two queries. Each saves it’s value in a global variable. Note: you can also store these values using the wix-storage API. The getBiggerNumber() functions checks which one is bigger and returns the number to be put into the $w(“#text19”) field. You can add additional queries (for other values) and then maybe change the routine to get biggest value.

I hope this helps.

Yisrael

Okay thanks Yisrael,

But I’m not sure the values are storing properly, as the text element changes to 0 every time even though the console.log’s are printing the correct values of 4 and 1.

This is my code now:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from ‘wix-data’;

let oWeekNum = 0;
let socialMediaNum = 0;

wixData.query(“testData”)
.eq(“refferalMethod”, “O-Week”)
.count()
.then((num) => {
let oweekNum = num;
console.log(oweekNum);
$w(“#text19”).text = “” + getBiggerNumber();
}
);

wixData.query(“testData”)
.eq(“refferalMethod”, “Social Media”)
.count()
.then((num) => {
let socialMediaNum = num;
console.log(socialMediaNum);
}
);

export function getBiggerNumber() {
if(oWeekNum > socialMediaNum) {
return oWeekNum;
}
else {
return socialMediaNum;
}
}

Thank you soo much for all of this!

Okay thank you soo much Yisrael it all works now! :smiley:

The only problem not is that nothing happens when you load the site by URL, but in the preview it works all fine. Here is the link to my site: https://zlemura29.wixsite.com/website/blank . Could you please navigate to the ‘New Page’ page and tell me if anything loads or the graphs populate?

Heres my completed code by the way, any ideas on why this is happening?:

import wixData from ‘wix-data’;

let oWeekNum = 0;
let socialMediaNum = 0;
let refferedNum = 0;

let maleNum = 0;
let femaleNum = 0;

wixData.query(“testData”)
.eq(“refferalMethod”, “O-Week”)
.count()
.then((num) => {
oWeekNum = num;
console.log(oWeekNum);
});

wixData.query(“testData”)
.eq(“refferalMethod”, “Social Media”)
.count()
.then((num) => {
socialMediaNum = num;
console.log(socialMediaNum);
});

wixData.query(“testData”)
.eq(“refferalMethod”, “Reffered”)
.count()
.then((num) => {
refferedNum = num;
console.log(refferedNum);
$w(“#text19”).text = “” + getBiggerRefferal();
});

wixData.query(“testData”)
.eq(“gender”, “M”)
.count()
.then((num) => {
maleNum = num;
console.log(“Male Number: " + maleNum);
});
wixData.query(“testData”)
.eq(“gender”, “F”)
.count()
.then((num) => {
femaleNum = num;
console.log(“Female Number: " + femaleNum);
$w(”#text24”).text = “” + getBiggerGender();
});

export function getBiggerRefferal() {
generateRefferalGraph();
if (oWeekNum > socialMediaNum) {
if (oWeekNum > refferedNum) {
return “O-Week”;
} else {
$w(“#text22”).text = "The most effective referral method for your society based on " +
" current members is through O-Week advertising. Although other forms of advertising draw membership to your society, " +
"it is clear O-Week events are working well for you. In order to learn more about preparing for O-Week, " +
“visit the ‘O-Week Clubs Info’ page on Arc.”
return “Refferals”;
}
} else {
return “Social Media”;
}

}

export function getBiggerGender() {
generateGenderGraph();
if (maleNum > femaleNum) {
return “Male”;
} else {
return “Female”;
}
}

export function generateRefferalGraph() {
let year = 2017;
let flights = {
2017: [oWeekNum, socialMediaNum, refferedNum]
};

$w.onReady(() => { 
	$w("#html1").postMessage(flights[year]); 
	console.log("post 1 " + flights[2017]); 
	$w("#html1").onMessage((event) => { 

		if (event.data.type === 'ready') { 
			$w("#html1").postMessage(flights[year]); 
			console.log("post 2"); 
		} 

	}); 
}); 

}

export function generateGenderGraph() {
let year = 2017;
let flights = {
2017: [maleNum, femaleNum]
};

$w.onReady(() => { 
	$w("#html2").postMessage(flights[year]); 
	console.log("post 1 " + flights[2017]); 
	$w("#html2").onMessage((event) => { 

		if (event.data.type === 'ready') { 
			$w("#html2").postMessage(flights[year]); 
			console.log("post 2"); 
		} 

	}); 
}); 

}
//Please ignore the fact I use flights and year as syntax, this is merely a rip from the Wix Chart example and don’t want to screw up the code changing it at this point :wink:

Thank you sooo much once again, and yes its a long one :frowning:

Hi,

Sorry I didn’t explain myself properly. You need to set the text19 text field in all of the queries. Like this:

wixData.query("testData")
   .eq("refferalMethod", "O-Week")
   .count()
      .then((num) => {
         oWeekNum = num;
	 console.log(oWeekNum);
         $w("#text19").text = "" + getBiggerRefferal();
      });

If something else is not clear, let me know.

Yisrael