Problem with dmx-show/hide attribute?

This is my array data.

This is my mapping function code which uses dmx-show.

The issue is, few of the elements have the display:none property, even the though they match dmx-show condition. And some elements are shown properly.

What is the issue here ? FYI - I am seeing this issue after the 4.8.0 update.

You should either use a conditional region or show/hide attributes, not both:

Also, are you sure the expression: {{response.product.id}} actually returns anything when placed on the page?

It is returning for some elements.

You can see in the image. The first element has response.product.id. But still it is in display:none

This is due to another reason. There are some non-existing values in my array.

I don’t really understand what to check on that image? Do you have a link to your page where we can check this?

https://488b-103-89-235-146.ngrok.io/products

Did u get the page ? Please also check the extra value error in array

In the array you have 11 items all with ids, the repeat is repeating 15 times (from the other post 4 are functions)

I think this is the cause of the show and hide messing up because you have 4 extra items and only the first 4 records (that have ids) are not displayed. Almost as if it begins to also loop back to record one as really there shouldn’t be 15 repeats from the array of 11

So, how to fix this, I am not adding the extra elements. It used to work properly before, even with extra elements.

Please check again. I have changed the dmxAppConnect.js file to old version of 1.12.3. And now it’s work ing properly.

Sorry i still don’t get the idea of this line:

  <div class="col horizontal-scroll__item" is="dmx-if" id="conditional1" dmx-bind:condition="response.product.id" dmx-hide="{{!response.product.id}}">

why use the condition and hide attribute? Use just ONE of them, depending on your needs.

Don’t change the app connect version, please leave as it is and fix the conditional show/hide so that we can check this!

I use condition, so that I could hide the contents of extra elements. Reason is some user might inspect it and cause some issues.

What i am saying is don’t use both conditional region and show/hide attributes. You need to pick one, not both!

Here is the reason I am using the conditional and dmx-show/hide element.

conditional- Hides the content inside of the extra functional variable of the array.
dmx-show - hides the elements from appearing on the page and causing design issues.

For now I will remove condition.

Sorry i am not following.
If you need to hide an element on the page based on some expression you need to pick ONE of these, not BOTH. So select whether you want to hide the elements using a conditional region or a show/hide attributes. Differences are explained in the link i posted above.

Please check the updated design. In chrome inspect mode, you can disable the display:none property and view some content of the last value of array.

So the issue here is the data your array returns?
I see 15 items in it. Are the last 4 not supposed to be in the array?

If they are not supposed to be there, then how do you add these items in the array?

The extra items are not supposed to be there. I am not adding them either. You can check using
dmx.app.get("content").products_info

How do you add the items in the array on your page?