How to display item when query is ready

Ask the community
,
1

I am passing the user name in a query, I want the tittle to display only when user name is ready:

Instead of saying "Hola, undefined! and then type the name, display the text only when the variable is defined.

2

Hi,

You can hide the text on load, then place the .show() after the query finish ( inside the .then ). So, your code should look something like this:

 $w.onReady( function () { 
 wixData.query("myCollection")
 .find()
 .then( (results) => { 
 // this will only run once the query has returned results
 $w("#text").text = "Hola" + userName + "!";
 $w("#text").show();
  } );  
// code here will run before the query has returned results 
} );

Hope this helps!
Best,

Mustafa

3

Hi @carlosgalvarez ,

@mhammouz has a point. The flow is:

  1. Hide the text on load in Properties panel that appears when the text component is selected. If you don’t see the panel, it’s probably hidden. You can enable it in Editor menu: Tools → Developer Tools → Properties Panel.

  2. In your code, query your collection (as I understand, you’re getting the user by its username), get the first matching user item, and use the name property of the item to form the text. Then show the hidden text.

import wixData from "wix-data";

$w.onReady(async () => {
  const username = "john";
  const {
    items: [user]
  } = await wixData
    .query("Users")
    .eq("username", username)
    .find();

  const welcomeText = $w("#welcomeText");
  welcomeText.text = `Hola ${user.name}`;
  welcomeText.show();
});