Hi everyone, I have this problem and I can’t find a solution.
import wixData from ‘wix-data’ ;
const collectionName2 = ‘MyAll2’ ;
$w . onReady ( async function () {
**await** buildFiltersAndPopulateRepeater ();
$w ( '#gender' ). onChange ( **async** () => {
if ( $w ( '#genderDecorBackButton' ). checked == **true** )
$w ( '#genderDecorBackButton' ). checked = **false** ;
**else**
$w ( '#genderDecorBackButton' ). checked = **true** ;
**await** buildFiltersAndPopulateRepeater ()
});
});
async function buildFiltersAndPopulateRepeater () {
let dataQuery = wixData . query ( collectionName2 );
//dataQuery = dataQuery.hasSome('collection', 'FirstPageProducts1');
if ( $w ( '#gender' ). checked == **true** ) {
dataQuery = dataQuery . hasSome ( 'gender' , 'Women' );
} **else** {
dataQuery = dataQuery . hasSome ( 'gender' , 'Men' );
}
initRepeater ();
$w ( '#productList1' ). data = **await** dataQuery . find (). then (( res ) => res.items );
}
async function initRepeater () {
try {
$w ( ‘#productList1’ ). onItemReady ( async ( $item , itemData ) => {
if ( itemData.product.discountedPrice == itemData.product.price ) {
$item ( ‘#discountBox2’ ). hide ();
$item ( ‘#discount2’ ). hide ();
} else {
$item ( ‘#discount2’ ). text = String ( 100 - Math . round ( 100 * itemData.product.discountedPrice / itemData.product.price )) + “% off” ;
}
const actualProduct = await wixData . query ( collectionName2 )
. include ( ‘brand’ )
. eq ( ‘product’ , itemData.product._id )
. find ()
. then (( res ) => {
let items = res.items ;
if ( items.length > 0 )
return items [ 0 ];
else
return null ;
});
if ( actualProduct && actualProduct.brand ) {
if ( actualProduct.brand.logoblack . startsWith ( ‘http://’ ) || actualProduct.brand.logoblack . startsWith ( ‘https://’ ) || actualProduct.brand.logoblack . startsWith ( ‘wix:image://’ )) {
$item ( ‘#logo1’ ). src = actualProduct.brand.logoblack ;
}
} else {
console . error ( “Error: Cannot read ‘logoblack’ property from undefined or null object.” );
}
$item ( ‘#colors1’ ). text = itemData.color.length + " colors" ;
if ( itemData.ecoFriendly == true )
$item ( ‘#ecoFriendlySign3’ ). expand ();
if ( itemData.sustainable == true )
$item ( ‘#sustainableSign3’ ). expand ();
});
} catch ( error ) {
console . log ( ‘Error fetching data:’ , error );
}
}
I use the code to query a collection called “MyAll2” and filter the results based on the gender selected by the user. It then populates a repeater element with the filtered data and updates some of the item properties.
The actualProduct variable is created inside the onItemReady event handler for the repeater. It’s used to fetch additional data from the same collection, specifically the brand object, for each item in the repeater. This is achieved by creating a new Wix Data query, including the ‘brand’ reference field, and filtering the results by the product ID of the current item.
The resulting actualProduct object contains the brand object as a property.
If the brand object exists and has a property called “logoblack” that starts with “http://”, “https://”, or “wix:image://”, the image source of an element with the ID “logo1” in the repeater item is set to that value.
The function also checks if the item is eco-friendly or sustainable and expands corresponding elements in the repeater if so.
Overall, the code populates a repeater with filtered data and updates the repeater item properties based on additional data fetched from the same collection.
The problem: If I switch the gender, and switch it back in the initial position for example ( From Women to Men, and back to the Women) The actualProduct which I use to take the brand image is returned null. The actualProduct is giving me the product and using .include(brand) is letting me navigate through the brand item from an another dataset, from where I get the black version of the logo (“logoblack”). This is irelevant, why is this happening. Nothing changes, why is returning a null object.
Here are two ss with before and after I switch:
And this is the browser console:
