Hello, I followed a code provided on here but I can’t get it to work. Can someone take a look at it to see what I am missing?
I have a button on my page that is linked to a dataset. I want to create a null return if no information let say in the video field the button will hide, if information is in the video field i wan the button to show. I have done hide/show before but never with a null value.
the console reads: An error occurred in one of datasetReady callbacks TypeError: Cannot read property ‘value’ of null
import wixData from 'wix-data';
$w.onReady(function () {
$w('#dataset1').onReady( () => {
let video= $w('#dataset1').getCurrentItem().value;
console.log("video =" + video);
if (video === null) {
console.log("inside if = true");
$w('#videoButton').hide();
} else {
$w('#videoButton').show();
}
});
})
1 Like
Hi, Eb.
If you replace the following line:
let video= $w('#dataset1').getCurrentItem().value;
with the following line:
let video = $w('#dataset1').getCurrentItem();
does that resolve the issue for you?
YES! it worked… it’s those little codes that get me. Thank you for your time
You’re welcome, Eb.
I discovered the answer at https://www.wix.com/code/reference/wix-dataset.Dataset.html#getCurrentItem ; that URL indicates that the getCurrentItem() method (function) itself “Returns null … if the dataset … [i]s empty.”
The following line:
let video= $w('#dataset1').getCurrentItem().value;
triggered the “An error occurred in one of datasetReady callbacks TypeError: Cannot read property ‘value’ of null” error because when the getCurrentItem() method (function) returns null, it does not have a ‘value’ property (it has a ‘value’ property only when the method returns an object [which is not null]).
HTH,
Art Bergquist
P.S. Wix: I recommend inserting the word “the” in between “of” and “datasetReady” in the error message; the improved error message reads as follows:
“An error occurred in one of the datasetReady callbacks TypeError: Cannot read property ‘value’ of null”
I have read your links thanks for the information. I have a question. Why can’t i make the same code work for my address button. Same exact function when the dataset is empty hide address button. Only difference is my dataset is dynamic
the console returns this: viewaddress= [object Object]
$w.onReady(function () {
$w('#dynamicDataset').onReady( () => {
let businessAddress = $w('#dynamicDataset').getCurrentItem();
console.log("businessAddress =" + businessAddress);
if (businessAddress === null) {
console.log("inside if = true");
$w('#viewAddress').hide();
} else {
$w('#viewAddress').show();
}
});
})
export function viewAddress_click(event) {
if( $w("#addressbox").hidden ) {
$w("#addressbox").show();
}
else {
$w("#addressbox").hide();
}
}
export function closebutton_click(event) {
$w("#addressbox").hide();
}
Hi, Eb.
I don’t see where you are outputting viewaddress to the console; I only see the following two/2 console.log() calls in your code:
console.log("businessAddress =" + businessAddress);
...
console.log("inside if = true");
As a result, you should only be seeing the first one (“businessAddress =” + businessAddress) and, possibly, the 2nd one (“inside if = true”) in your console.
I am sorry I am not following your statement. Do I need remove the business console? because my button is not hiding. I am sorry if I forgot to say that.
@emsimmons77 Hi, Eb. What I’m saying is that I don’t see how you’re seeing the following in your console:
viewaddress= [object Object]
based on the latest code you sent (unless that is being output from other code).
@abergquist Ah! ok below is my entire page code. I am not sure either
import wixData from 'wix-data';
import wixUsers from 'wix-users';
$w.onReady(function () {
$w('#dataset1').onReady( () => {
let video = $w('#dataset1').getCurrentItem();
console.log("video =" + video);
if (video === null) {
console.log("inside if = true");
$w('#videoButton').hide();
} else {
$w('#videoButton').show();
}
});
})
$w.onReady(function () {
$w('#dynamicDataset').onReady( () => {
let businessAddress = $w('#dynamicDataset').getCurrentItem();
console.log("businessAddress =" + businessAddress);
if (businessAddress === null) {
console.log("inside if = true");
$w('#viewAddress').hide();
} else {
$w('#viewAddress').show();
}
});
})
export function viewAddress_click(event) {
if( $w("#addressbox").hidden ) {
$w("#addressbox").show();
}
else {
$w("#addressbox").hide();
}
}
See if you can first clear your console and then refresh the web page. My hope is that will eliminate the viewaddress entry from the console.
Ok so I cleared my console and refreshed my page and i still get the businessAddress =[object Object] and my address button does not hide. Any other suggestions?
Hi, Eb.
Your code is working as designed; first let me remove extraneous space (horizontal and vertical) and do some indentation to make the code easier to read:
import wixData from 'wix-data';
import wixUsers from 'wix-users';
$w.onReady(function () {
$w('#dataset1').onReady( () => {
let video = $w('#dataset1').getCurrentItem();
console.log("video =" + video);
if (video === null) {
console.log("inside if = true");
$w('#videoButton').hide();
} else {
$w('#videoButton').show();
}
});
})
$w.onReady(function () {
$w('#dynamicDataset').onReady( () => {
let businessAddress = $w('#dynamicDataset').getCurrentItem();
console.log("businessAddress =" + businessAddress);
if (businessAddress === null) {
console.log("inside if = true");
$w('#viewAddress').hide();
} else {
$w('#viewAddress').show();
}
});
})
export function viewAddress_click(event) {
if ($w("#addressbox").hidden) {
$w("#addressbox").show();
}
else {
$w("#addressbox").hide();
}
}
(Note that I indent code two/2 spaces [not Tabs] within a structure (e.g., method/function definition, if/else, etc.) By leaving the console.log() calls un-indented, it reminds me that they’re temporary code only used for debugging and that the code will look much cleaner when they are removed.
Now let’s focus on the code in question:
if (businessAddress === null) {
console.log("inside if = true");
$w('#viewAddress').hide();
} else {
$w('#viewAddress').show();
}
You indicate that you see the following in the console:
businessAddress =[object Object]
and that your address button does not hide.
Looking at the code “snippet” above, it checks if businessAddress === null; since it’s an object, it’s not null. Therefore, program control proceeds to the else where it shows/displays the button. Your logic is to hide the button only if the businessAddress === null so they code is working as designed.
Thank you for the explanation and format of coding it really helps me with understanding. since toy advise that my code is correct, I figured it out once you broke it down for me… I should have swap the hide/show text.
Thank you for your time and attention to my issue
Excellent; you’re welcome. I’m glad it’s now working for you; it’s a good feeling, isn’t it?
Yes, learning to code is kind of addictive.