Hi!
I have a repeater "#repeater1", which contains a container "#container2". Each container consists of 4 items, and the 4th item, which is a box "#box204", also consists of 4 items: "#text109", "#text218", "#text107" and "#text219".
I'd like to set these last 4 items through the hierarchical structure - see commented part of the code below. Unfortunately this doesn't seem te work. When I try to do that, in my UI, each item of the repeater is assigned with the same value, apparently the last one of itemData. Any idea why?
I can set the children individually e.g. `$item("#text109").text' (line 8 - 11), but I cannot set `$item("#container2").children[3].children[...].text'
$w("#repeater1").onItemReady( ($item, itemData, index) => {
if(itemData.image.dataurl !== "data:image/jpg;base64," && itemData.image.dataurl !== ""){
$item("#image271").src = itemData.image.dataurl;
} else {
$item("#image271").src = itemData.image.url;
}
$item("#text109").text = itemData.brand;
$item("#text218").text = "";
$item("#text107").text = itemData.price[0].Amount.Base.toString();
$item("#text219").text = "";
/*$item("#container2").children[3].children[0].text = itemData.brand; // Brand
$item("#container2").children[3].children[1].text = ""; // Description
$item("#container2").children[3].children[2].text = itemData.price[0].Amount.Base.toString(); //Base Price
$item("#container2").children[3].children[3].text = "";*/
});
For the record, I've experienced other issues within this context as well: https://www.wix.com/corvid/forum/community-discussion/style-backgroundcolor-is-set-to-color-instead-of-rgba
Hi @Yisrael (Wix). Thanks for looking into this.
The thing is, in your code, you're actually not setting the values dynamically using the hierarchical approach. What you write:
b2text.text = '' + itemData.num;
works for me as well. Also getting the values hierarchically works fine for me. It's actually the assignment that doesn't work. My console.log() statements show the right values, but when the work is done, it isn't reflected in the UI. Somehow all text boxes within my containers of the repeater get assigned the same value. This value seems to be the last value that I set. So it seems that all previous values are either overwritten somewhere, or the container items of the repeater are not well transferred to the UI.
I've experienced similar issues in another use case, which can be found here: https://www.wix.com/corvid/forum/community-discussion/style-backgroundcolor-is-set-to-color-instead-of-rgba
This second use case immediately illustrates why I want to work with the hierarchical structure - it allows me to iterate through all elements, which allows me to dynamically alter elements in case needed. It's nothing new, it's the way you typically write dynamic JavaScript as well, no?
No reason not to access elements as children. This got me interested so I gave it a shot...
Database has two fields: title (string), num (number)
Added a Repeater to the page which included #container3 to start with.
Added two boxe containers, #box1 and #box2, to #container3 of the Repeater.
Each box has a Text field in order to display the appropriate fields from the data.
Queried the database and set the Repeater's data property to the results.
Get the children of #container3 and display in the console.
Get the children of the children and display in the console.
Set the text fields as children.
import wixData from 'wix-data'; $w.onReady(function () { $w("#repeater1").onItemReady( ($item, itemData, index) => { // get the children (box containers) of the repeater let rptChildren = $item("#container3").children; console.log('rptChildren', rptChildren); // get box1 let box1 = rptChildren[0]; console.log('box1', box1); let box1Children = box1.children; let b1text = box1Children[0]; // get the text field b1text.text = itemData.title; // get box2 let box2 = rptChildren[1]; console.log('box2', box2); let box2Children = box2.children; let b2text = box2Children[0]; // get the text field b2text.text = '' + itemData.num; // convert number to strig } ); wixData.query("Numbers") .ascending('num') .find() .then( (results) => { console.log('number of results: ' + results.items.length + 'items'); $w("#repeater1").data = results.items; } ); } );
This worked just fine and the Repeater was populated and displayed.
My only question is "why do it this way"? Just seems easier to me to populate the elements directly using the $item scope selector.
Anyhow, it was a fun experiment.