I’m trying to pull data into my webpage and push a result after the user types into a textbox and then clicks a button. It is basically a search bar and submit button.
Searching the field “Title” and I want to return the fourth field in the record. The result should also be a string.
I understand the query below is returning a record full of multiple fields each with their own value. I’d like to select an individual field within res.items and push that value forward. There should only be one record returned when the user queries the data.
Here’s my code. Any help would be appreciated.
import wixData from “wix-data” ;
export function button1_click ( event ) {
// Runs a query on the “GameData” collection
wixData . query ( “GameData” )
. contains ( “Title” , $w ( “#input1” ). value )
. find () // Run the query
. then ( res => {
// Set textbox to the result of the query
$w ( “#text1” ). text = res . items [ 3 ];
});
}
You are using - - > contains < - - why?
If you are searching for an exact matching and only one single item/value, why you do not use - → .eq(dbField, vlaue) then?
This should find an exact existing value (exact match) in your DATABASE.
Perhaps you also should show a little excerpt of your DB and an example of an end-result, you want to have after filtration/queriying.
The result is “undefined” using .contains and I get the same using .eq. I know I have the collection and target field correct (checked case sensitivity).
Here’s my updated code:
import wixData from “wix-data” ;
export function button1_click ( event ) {
// Runs a query on the “GameData” collection
wixData . query ( “GameData” )
//.contains(“Title”, $w(“#input1”).value)
. eq ( “Title” , $w ( “#input1” ). value )
. find () // Run the query
. then ( res => {
// Set textbox to the result of the query
//$w(“#text1”).text = items[3];
console . log ( $w ( “#input1” ). value ); // This is working fine
console . log ( res . items [ 3 ]);
});
}
I’m pretty new to Wix so I’m trying to figure out the best way to do things. I saw a tutorial (see below) that used .contains, which is why I used it.
Here’s a screenshot of the table.
Try this one…
import wixData from "wix-data";
//-----------USER-INTERFACE----------------
const DATABASE = "DATABASE";
const DB_FIELD = "title";
//-----------USER-INTERFACE----------------
$w.onReady(()=>{$w('#button1').onClick(()=>{xxx();});})
function xxx() {
wixData.query(DATABASE)
.eq(DB_FIELD, $w("#input1").value).find()
.then((res) => {console.log("Input-Value: ", $w("#input1").value);
let items = res.items; console.log(items);
let firstItem = items[0]; console.log(firstItem);
let title = firstItem.title; console.log(title);
$w("#text1").text = title;
}).catch((err)=>{console.log(err);});
}
Take a closer look onto - - > CONSOLE! What do you get in CONSOLE?
Replace the values in the USER-INTERFACE-SECTION with your own ones…
Have fun and good luck! (don’t forget to like it, if you really liked it
)
Here are the results. Still not working.
I went back and switched the field in the DB that I am trying to use in the query. I went from “Title” (type is text) to pFaction (type is number). I was able to get the code to work when I converted the input from $w(“#input1”) to a number using Number().
So this got me looking at the DB field Title, which is a string. When I was doing this I found an error in the Field Key, which for some reason was all lowercase. I think the software auto-populated this when I first setup the table. This difference in case ended up being the whole problem because I was trying to search the Field Name when it was looking at the Field Key.
All IDs of new generated DB-Fields gets a lower-case ID-Name (automaticaly).
If you want to have it starting with a upper-case letter, than you have to set it up manualy on the first-time creation process.