I am a beginner coder who is creating a site with drop down menu (#dropdown1) that looks up data (#dataset2) and then displays it back to to the user in a text box (#textbox27).
The issue is have is that when I run my code below, I am getting that ModYr is “undefined or null” and it will not display in #textbox27 I am sure it is a minor syntax issue. I would appreciate you to review what I have below and let me know where I went wrong!
import wixLocation from ‘wix-location’ ;
import wixData from ‘wix-data’ ;
$w.onReady( function () {
$w( “#dropdown1” ).onChange((event) => {
let modelYearCode = $w( “#dropdown1” ).value; //This line gets the current Model Year Code value of the dropdown option that was selected
$w( “#dataset2” ).onReady(() => {
console.log( “The dataset is ready to be filtered.” ); //This line tells us our dataset is ready to be filtered
$w( “#dataset2” ).setFilter(wixData.filter().eq( “Model Year Code” , modelYearCode) //This line looks for matching titles in the database collection so that now it is only displaying 1 result
) .then(() => {console.log( “To filter dataset is now filtered with the matching title from the dropdown.” );
let ModYr = $w( “#dataset2” ).getCurrentItem(); //This line gets the 1 result we should have in our filtered dataset
console.log( “Model Year is selected” );
console.log(ModYr); //This line is meant to display ModYr in the console
$w( “#text27” ).text = ModYr; //This line is meant to display the Model Year value
}) . catch ((err) => { console.log(err); }); }); }); });
Hi,
The function getCurrentItem() returns an object that has all the values for that record. You need to specify what field key’s value that you want. So, if the field key of the field is “ModYr”, either of these approaches would work:
let ModYr = $w("#dataset2").getCurrentItem().ModYr;
let item = $w("#dataset2").getCurrentItem();
let ModYr = item.ModYr;
@anthonyb Thank you for the input and the explanation: it made sense to me.
I think this got me 1 step closer. The issue I am having now is “ModYr” is still “null” when I preview the page. Something is still wrong with the "Let ModYr = $w( " #dataset2 " ).getCurrentItem().ModYr; line.
Any help is apprecaited.
import wixLocation from 'wix-location';
import wixData from 'wix-data';
$w.onReady(function () {
$w("#dropdown1").onChange((event) => {
let modelYearCode = $w("#dropdown1").value;
$w("#dataset2").onReady(() => {
console.log("The dataset is ready to be filtered.");
$w("#dataset2").setFilter(wixData.filter().eq("Model Year Code", modelYearCode)
) .then(() => {console.log("To filter dataset is now filtered with the matching title from the dropdown.");
let ModYr = $w("#dataset2").getCurrentItem().ModYr;
console.log("Model Year is selected is");
console.log(ModYr);
$w("#text27").text = ModYr; //This line is meant to display the Model Year value in the #text27 box
}) .catch((err) => { console.log(err); }); }); }); });
Your filter statement is using the field name and not the field key. Corvid only recognizes field keys.
This is a screen shot from the content manager:
You are correct: thanks for the catch. I have now corrected that. However, I still have the same issue. Here is my latest code with the proper field name:
import wixLocation from 'wix-location';
import wixData from 'wix-data';
$w.onReady(function () {
$w("#dropdown1").onChange((event) => {
let modelYearCode = $w("#dropdown1").value; //This line gets the current Model Year Code value of the dropdown option that was selected
$w("#dataset2").onReady(() => {
console.log("The dataset is ready to be filtered."); //This line tells us our dataset is ready to be filtered
$w("#dataset2").setFilter(wixData.filter().eq("Model Year Code",modelYearCode) //This line looks for matching titles in the database collection so that now it is only displaying 1 result
) .then(() => {console.log("To filter dataset is now filtered with the matching title from the dropdown.");
let ModYr = $w("#dataset2").getCurrentItem(modelYearCode).modelYear; //This line gets the 1 result we should have in our filtered dataset
console.log("Model Year is selected is");
console.log(ModYr);
$w("#text27").text = ModYr; //This line displays the Model Year value
}) .catch((err) => { console.log(err); }); }); }); });
And the error I get in the console log:
TypeError: Cannot read property 'modelYear' of null
This is all around the line
let ModYr = $w("#dataset2").getCurrentItem(modelYearCode).modelYear;
Any help is appreciated!
let ModYr = $w("#dataset2").getCurrentItem().modelYear;
@anthonyb Thanks. Even with that change, I still get the same error. I am starting to think I might have a database issue.
modelYearCode is the field key for the values in the drop down selected by the user
modelYear is the fiel key for the value I want looked up and displayed for the user
My working page is linked below. Any insight is appreciated.
https://aircooledevolution.wixsite.com/classic/chevrolet-1946-1952
So I rebuilt my dataset, ran some more tests, the 1 line of code that I am struggling with his below.
let ModYr = $w("#dataset2").getCurrentItem().modelYear;
Something is not correct, as it is not finding the filtered value for “Model Year”. My information in the dataset looks like this:
Where the Field Key for each one are shown below
Model Year Code (set as the Primary)
And Model Year
What do I have set wrong? I am sure there is something that I have overlooked.
The filtering condition is probably not quite right, so it’s not returning any records. You need to determine whether or not this is the case. Try this:
$w("#dataset2").setFilter(wixData.filter().eq("modelYear",modelYearCode)
.then(() => {
let cnt = $w('#dataset2').getTotalCount();
$w('#dataset2').getItems(0,cnt)
.then((result) => {
console.log(result);
})
})
Thanks for your input. When I got your code to work, the count was displayed as 14. Since my dataset has 7 rows and we are looking at 2 columns, that would equate to 14 total values. Is this what you expect?
I am still struggling with the line below. What I have found is the filter is not working properly and the modelYear being looked up is the value in the 1st row, not the row selected by the user. Meaning if you select “F”, the correct value to return is 1948. However, no matter what the user inputs, the system responds with the value of 1946.
let ModYr = $w("#dataset2").getCurrentItem().modelYear;
I have tried many other ways and none have been successful. Am I on the wrong track using the filter command? Should I be using a different command such as:
getItem
query
find
Any advice is appreciated!
There were enough revisions to the code, that it would be good for you to re-post what you have now. Thanks.
Good idea. Here is the latest:
import wixLocation from 'wix-location';
import wixData from 'wix-data';
$w.onReady(function () {
$w("#dropdown1").onChange((event) => {
let myc = $w("#dropdown1").value; //This line gets the current Model Year Code value of the dropdown option that was selected
console.log(myc);
})
$w("#dataset2").onReady(() => {
console.log("The dataset is ready to be filtered.");//This line tells us our dataset is ready to be filtered
$w("#dataset2").setFilter(wixData.filter("modelYearCode", myc))
.then(() => {console.log("Dataset is now filtered with the matching title from the dropdown.");
let ModYr = $w("#dataset2").getCurrentItem().modelYear; //This line gets the 1 result we should have in our filtered dataset
console.log("Model Year is selected");
console.log(ModYr);
My code works until you get tho this line:
let ModYr = $w("#dataset2").getCurrentItem().modelYear;
Any help is appreciated!
There were some syntax issues with it. In this case, when you’re calling the filtering code from a dropdown change event, there is no need to have the code within a dataset onReady. The dataset will be ready by the time the user picks the value from the dropdown.
Also, the setFilter syntax was a little off, it didn’t have a function name like eq in it. Here’s the revised code:
import wixLocation from 'wix-location';
import wixData from 'wix-data';
$w.onReady(function () {
$w("#dropdown1").onChange((event) => {
let myc = $w("#dropdown1").value;
console.log(myc);
$w("#dataset2").setFilter(wixData.filter()
.eq("modelYearCode", myc)
)
.then(() => {
let ModYr$w("#dataset2").getCurrentItem().modelYear;
console.log("Model Year is selected");
console.log(ModYr);
})
})
})
That worked once I made a slight modification:
let ModYr = $w("#dataset2").getCurrentItem().modelYear;
I now see where I had my syntax error. Thank you very much!!
To help others who might be trying to perform the same function, below is my final code which includes an additional line to populate a text box on my page with the information pulled from the filtered dataset. I hope this helps others!
import wixLocation from 'wix-location';
import wixData from 'wix-data';
$w.onReady(function () {
$w("#dropdown1").onChange((event1) => {
let myc = $w("#dropdown1").value;
console.log(myc);
$w("#dataset2").setFilter(wixData.filter()
.eq("modelYearCode", myc)
)
.then(() => {
let ModYr = $w("#dataset2").getCurrentItem().modelYear;
console.log("Model Year is selected");
console.log(ModYr);
$w("#text27").text = ModYr;// Important Note, modelYear was converted from a Number to Letters in the Dataset
})
})
})
