Hello!
I need help trying to get a way to detect if a photo item in a dataset is empty so I know whether or not a expand button should show.
Here is my code:
if(!$w('#dynamicdataset1').getCurrentItem.optionalphoto {
$w('expandbutton').hide()
}
This doesn’t work when I am on a dynamic page and the optionalphoto item is empty. It does stay showing if I do have something in the optional photo item.
Help PLEASE. I AM NEW. BUT I LOVE WIX CODE.
Any confusion? Just ask!
You need to use the correct syntax on your test.
The if conditional statement looks like this:
if ( condition ) {
// Do something
} else {
// Do something else
}
If you look at your code snippet you will see you are missing a closing parenthesis. Additionally the getCurrentItem is a function not a property so it needs to have parenthesis appended. If you add that your code may work.
// -------------- add closing parenthesis here ------------ +
// add parenthesis here ---------- v v
if ( !$w('#dynamicdataset1').getCurrentItem().optionalphoto ) {
$w('expandbutton').hide();
}
One extra test you could perform is to verify that the photo link name is longer than 0.
let currentItem = $w('#dynamicdataset1').getCurrentItem();
if (!currentItem.optionalphoto ||
currentItem.optionalphoto.length === 0) {
$w('expandbutton').hide();
}
Cheers
Steve
Hello, thank you for the quick reply!
I tried using your first and second suggestion but it didn’t work:
I am not sure what happened but the ‘Show More’ Button still appeared even though the optionalimage item was empty.
if(!$w('#dynamicDataset').getCurrentItem().optionalphoto) {
//the button id did change
$w('#button1').hide();
} else {
$w('#button1').show();
}
For the extra test you suggested, I am not using an image src. I am importing the image directly to the dataset and am not using a src code. Am I wrong that images still return the src even though they don’t show it?
Thanks again!
Hi There
OK I made a minor, but important, mistake with the example I provided (which I have corrected in the post above)
The test I proposed:
if (!currentItem.optionalphoto ||
currentItem.optionalphoto.length > 0)
should have been
if (!currentItem.optionalphoto ||
currentItem.optionalphoto.length === 0)
Essentially testing to see if
a. we are missing an optional photo field
or
b. we have an optional photo field BUT the field length is 0 meaning that there is no photo reference
OK now there are a couple of things to look at.
Let’s start with the second
When you download an image it goes into a special storage area that is referenced by the Wix code framework using a URL that is a string and looks like this:
"wix:image://v1/df0e14_5d4967c2f63e4ffe82a80eb7e52f39dc~mv2_d_1667_1667_s_2.png/df0e14_5d4967c2f63e4ffe82a80eb7e52f39dc~mv2_d_1667_1667_s_2.png#originWidth=1667&originHeight=1667"
When you access the property for optionalphoto in the dataset you are really looking for a string that looks like this.
The Wix API does the hard work for you in terms of determining where your image is and how to reference it using the image type property and creating the string describing the URL.
So if the image string is malformed (not easy to figure out unless you try to use it) or either doesn’t exist or has a length of zero (e.g. the string looks like “”) then you don’t have an image.
You can test this out in your code by adding a log statement that will show up at the bottom of your page when running in preview mode. Try inserting this call before the if test:
console.log('Dumping dataset currentItem...\n'+
JSON.stringify(currentItem));
console.log('Optional Photo: '+currentItem.optionalphoto);
If you continue to have problems then helping you will be easier if you share the page you are having problems with and describe what you are expecting to see on the page.
Hope this helps
Cheers
Steve
Yes, this helps. Thank you!
Also, I don’t really understand how the following would work. Can you please explain.
console.log('Dumping dataset currentItem...\n'+ JSON.stringify(currentItem));
console.log('Optional Photo: '+currentItem.optionalphoto);
Just a side note: Is there an API reference that shows what type of math equations are allowed?
// like mod, -=, +=, <=, >= and others?
And a delay type of syntax?
delay("4")
@kshah_stem The best thing for you to do is go through some basic Javascript tutorials. There are several online that you can consume at your own pace.
I would suggest formal courses like
or Free online references that also double as tutorial sites like
There are also some good youTube channels like:
Academind - Javascript Tutorial For Beginners
The Net Ninja - Javascript For Beginners
which includes
Lastly the main reference that most Wix Code pages will point you to, which you will find very useful is the MDN Javascript Documentation
To briefly answer your questions:
What type of math equations are allowed like mod, -=, +=, <=, >= and others?
The answer is that pretty much anything you need. The operators you have identified above are used in conditional expressions. These are essentially tests of something to see if the answer is either true or false .
So is the variable i equal to 1 . -------> if (i == 1) or if (i === 1)
These two do more or less the same thing
but with an important difference. Javascript variables can contain anything as a value. A string, a number (integer or floating point), an object, an array, a function. So when you use ‘==’ the javascript engine tries to convert each side of the test to the same type so i == “a string” means that it will try to use i as a string even if it isn’t. This can lead to strange results. When you use ‘===’ you are testing for type AND value. So now i === 'a string" will be false if i doesn’t contain a string. If i does contain a string then a string comparison will be used.
For more information you can read the MDN Comparison Operators Page
For other math operations simple ones like add, subtract multiply and divide you use (+, -, *, /).
See MDN Arithmetic operators .
For more complex operations for example, trigonometry where you may need to use sin and cosin or tangents; or logarithms; or float to integer conversion like rounding or truncate, then you need to use the built in math libraries or look for third party libraries if you don’t know how to do the calculation your self.
See MDN Math Object methods (make sure you have taken the basic tutorials before jumping in here)!
Lastly the delay(“4”) is provided using a builtin function called setTimeout. You will need to understand what a closure is to use this function but the MDN documentation for this is pretty good also:
See MDN setTimeout Documentation
Good luck
Steve
@kshah_stem Forgot this question:
How does the following work?
console.log('Dumping dataset currentItem...\n'+ JSON.stringify(currentItem));
console.log('Optional Photo: '+currentItem.optionalphoto);
Very simply:
console.log() is a built in javascript function that writes information to the Wix Console AND the browser console to help with fixing bugs (debugging). When you run in preview AND you have the developer console open these messages will be displayed at the bottom of your screen.
Some function calls return a value that you can also display that is a string. If the value is NOT a string it has to be converted to a string for console.log() to work. Most primitive types like a number will need to be converted to a string and have a built in converter toString(). Other types, primarily objects and arrays, need to be converted to a string first. This is done conveniently for you using the built in JSON object. This allows you to convert an object or array to a string using stringify() or a string into an object or array using parse().
In the example above I use JSON.stringify(currentItem) because i know that the item returned from the getCurrentItem() function is an object and will be easier to look at if it has been turned into a string first.
Lastly when you have several ‘things’ of data that you want to make into a string you can use the + operator to concatenate or add strings together. For example I know that currentItem.optionalphoto contains a string so by adding it to some text that tells me what I am displaying in the log I have context for the log output:
So console.log('Optional Photo: ’ + currentItem.optionalphoto); will result in log output in the console at the bottom of the screen that looks like this:
Optional Photo: wix:image://v1/df0e14_5d4967c2f63e4ffe82a80eb7e52f39dc~mv2_d_1667_1667_s_2.png/df0e14_5d4967c2f63e4ffe82a80eb7e52f39dc~mv2_d_1667_1667_s_2.png#originWidth=1667&originHeight=1667
Hope this helps
Steve
@stevendc
Thank you!
It does help except for one thing. Why do you need to include this in the console.log()?
'Dumping dataset currentItem...\n'+
@kshah_stem It is really just a matter of style. If you end up displaying multiple pieces of information from your page you may need to have context in the output. Some people will have code pages that have tens of functions and hundreds of lines so knowing where a console.log statement occurred is important.