Question:
Need help understanding why setting $w(‘#myRepeater’).data = repeaterData; not applying data to the fields in a repeater.
Product:
Wix Studio Editor
What are you trying to achieve:
Using dynamic pages in conjunction with multiple CMS collections. In this portion of the page I’m using a repeater to display an image “iconImg” and text “iconTxt”, combining data from 2 CMS collections. Running the code below results in showing 3 repeater elements displayed (that’s good, as it only has 1 by default), but the repeater only shows the default repeater image (#iconImg ) and default repeater text (#iconTxt ).
Code and console output below. The relationship of CMS collections, datasets, and repeater data still not clear to me - and also onReady and onItemReady. Feel like there must be some best practices to be able to use dynamic coding, Suggestions welcome. I learn well with examples, but wix/vloe examples are either too simple or over complicated. Thanks!
import wixData from ‘wix-data’;
$w.onReady(async function () {
$w(“#listings”).onReady(() => {
let itemObj = $w("#listings").getCurrentItem();
//
$w("#PropertyIconsDataset").onReady(() => {
let repeaterData = [];
wixData.query("repeaterIcons")
.find()
.then(results => {
results.items.forEach(item => {
let p = "";
let iconTxt = item.title;
let iconImg = item.image;
p = itemObj.numBedrooms;
if (iconTxt === "Bedrooms" && (p !== undefined || p !== null || p !== '')) {
repeaterData.push({ _id: '1', iconTxt: "Beds " + p, iconImg: iconImg });
}
p = itemObj.numBaths;
if (iconTxt === "Baths" && (p !== undefined || p !== null || p !== '')) {
repeaterData.push({ _id: '1', iconTxt: "Bath " + p, iconImg: iconImg });
}
});
$w('#myRepeater').data = repeaterData;
console.log("Repeater Data Set: ", $w('#myRepeater').data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
});
$w("#myRepeater").onItemReady(($item, itemData, index) => {
});
});
}); // onReady
Console output:
Repeater Data Set onready:
Array(3)jsonTableCopy JSON
0: {…}jsonTableCopy JSON
_id: “3”
iconTxt: “2076 SF”
iconImg: “wix:image://v1/d177e4_525c977fa4f54c8fbd3cbe5dcc3c38d8~mv2.png/ lot.png#originWidth=200&originHeight=162”
1: {…}jsonTableCopy JSON
_id: “2”
iconTxt: “Bath 2”
iconImg: “wix:image://v1/d177e4_b47ab08620db42baab408ebce16e74fa~mv2.png/ bath.png#originWidth=200&originHeight=162”
2: {…}jsonTableCopy JSON
_id: “1”
iconTxt: “Beds 3”
iconImg: “wix:image://v1/d177e4_eb1cd32e30e948aa817f1e7a29c0d5fb~mv2.png/ bed.png#originWidth=200&originHeight=162”
Also - not sure how to control the sorting order of the repeater. Thank you for any help!
