problem with promise?

mathgalago · November 14, 2020, 3:34pm

My webpage is not loaded properly, data from query is not inserted to repeater.
I think this has something to do with promise but I’m not sure,
can anyone help?

[https://www.garimd.com/for-rent](help?
https://www.garimd.com/for-rent)

import wixWindow from 'wix-window';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(() => {
 // show only approved data
 //$w('#dataset1').setFilter(wixData.filter().eq('isApproved', true));
    wixData.query('RentRealEstate')
    .eq('isApproved', true)  // show only approved data
    .find()
    .then((results) => {
        $w('#repeater1').data = results.items;
        console.log('here1');
    })

 // show all cities in dropdown: city
    wixData.query('RentRealEstate')
        .ascending('city')
        .eq('isApproved', true)
        .find()
        .then(res => {
 let options = [{ 'value': '', 'label': 'כל הארץ' }];
 const uniqueCities = getUniqueCities(res.items);
            $w('#dropdownRentCity').options = options.concat((buildOptions(uniqueCities)));
            console.log('here2');

        })

 // show all types in dropdown: property-type
    wixData.query('PropertyTypes')
        .find()
        .then(res => {
 let options = [{'value': '', 'label': 'כל סוג'}];
 const uniqueType = getUniqueType(res.items);
            $w('#dropdownPropertyType').options = options.concat(buildOptions(uniqueType));
        })

    $w('#dataset1').onReady(() => {
        $w('#repeater1').onItemReady(($item, itemData, index) => {

 // open dynamic lightbox on click
            $item('#buttonOpenLightbox').onClick(() => {
                wixWindow.openLightbox('LightboxRentRealEstate', itemData);
            })

 // create a google maps link for each item
 let mapsURL = 'https://www.google.co.il/maps/place/' +
                itemData.address.replace(' ', '+') +
 ',+' + itemData.city.replace(' ', '+');
 //console.log(mapsURL);
            $item('#buttonAddress').link = mapsURL;
            $item('#buttonAddress').target = '_blank';
            console.log('here3');

        })
    });

//
// I deleted some necessary code here
//
 
function getUniqueCities(items) {
 const citiesOnly = items.map(item => item.city);
 // Return an array with a list of unique cities
 return [...new Set(citiesOnly)];
}

function getUniqueType(items) {
 const uniqueType = items.map(item => item.title);
 // Return an array with a list of unique cities
 return [...new Set(uniqueType)];
}

function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return { value: curr, label: curr };
    });
}

J.D · November 14, 2020, 4:20pm

Try to organize your code first.

Use only a single $w.onReady() per page (it’s a good practice).
Decide if you want to use direct collection queries or datasets and stick to it.
Then if it still doesn’t work, post your code again.

mathgalago · November 14, 2020, 4:41pm

Thanks.

Good idea - fixed.
this code is already uses only queries (or am I missing something?)
still doesn’t work - here all the code:

import wixWindow from 'wix-window';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(() => {
 // show only approved data
    wixData.query('RentRealEstate')
    .eq('isApproved', true)  // show only approved data
    .find()
    .then((results) => {
        $w('#repeater1').data = results.items;
        console.log('here1');
    })

 // show all cities in dropdown: city
    wixData.query('RentRealEstate')
        .ascending('city')
        .eq('isApproved', true)
        .find()
        .then(res => {
 let options = [{ 'value': '', 'label': 'כל הארץ' }];
 const uniqueCities = getUniqueCities(res.items);
            $w('#dropdownRentCity').options = options.concat((buildOptions(uniqueCities)));
            console.log('here2');

        })

 // show all types in dropdown: property-type
    wixData.query('PropertyTypes')
        .find()
        .then(res => {
 let options = [{'value': '', 'label': 'כל סוג'}];
 const uniqueType = getUniqueType(res.items);
            $w('#dropdownPropertyType').options = options.concat(buildOptions(uniqueType));
        })

        $w('#repeater1').onItemReady(($item, itemData, index) => {
 // open dynamic lightbox on click
            $item('#buttonOpenLightbox').onClick(() => {
                wixWindow.openLightbox('LightboxRentRealEstate', itemData);
            })

 // create a google maps link for each item
 let mapsURL = 'https://www.google.co.il/maps/place/' +
                itemData.address.replace(' ', '+') +
 ',+' + itemData.city.replace(' ', '+');
 //console.log(mapsURL);
            $item('#buttonAddress').link = mapsURL;
            $item('#buttonAddress').target = '_blank';
            console.log('here3');
    });

 // delete old data
    get_deleteEventsDatabaseOldData();
});

export function buttonFilterResults_click(event) {
 // minimum rooms
 var minRooms = 1;
 if ($w('#inputMinRooms').value !== '') {
        minRooms = parseFloat($w('#inputMinRooms').value);
    }

 // maximum rooms
 var maxRooms = 15;
 if ($w('#inputMaxRooms').value !== '') {
        maxRooms = parseFloat($w('#inputMaxRooms').value);
    }

 // minimum price
 var minPrice = 500;
 if ($w('#inputMinPrice').value !== '') {
        minPrice = parseFloat($w('#inputMinPrice').value);
    }

 // maximum price
 var maxPrice = 15000;
 if ($w('#inputMaxPrice').value !== '') {
        maxPrice = parseFloat($w('#inputMaxPrice').value);
    }

 // city
 const CurrentCity = $w('#dropdownRentCity').value;

 // property type
 let currentType = $w('#dropdownPropertyType').value;

 // the query
 let RentQuery = wixData.query('RentRealEstate');
 if (CurrentCity.length !== 0) {
        RentQuery = RentQuery.eq('city', CurrentCity);
    }
 if (currentType !== 'כל סוג' && currentType.length !== 0) {
        RentQuery = RentQuery.eq('propertyType', currentType)
    }
 if ($w('#checkboxAC').checked === true) {
        RentQuery = RentQuery.eq('airCondition', true);
    }
 if ($w('#checkboxYard').checked === true) {
        RentQuery = RentQuery.eq('yard', true);
    }
 if ($w('#checkboxAnimals').checked === true) {
        RentQuery = RentQuery.eq('animals', true);
    }
 if ($w('#checkboxFurniture').checked === true) {
        RentQuery = RentQuery.eq('furniture', true);
    }
 if ($w('#checkboxElevator').checked === true) {
        RentQuery = RentQuery.eq('elevator', true);
    }
 if ($w('#checkboxParking').checked === true) {
        RentQuery = RentQuery.eq('parking', true);
    }
 if ($w('#checkboxRenovated').checked === true) {
        RentQuery = RentQuery.eq('renovated', true);
    }
 if ($w('#checkboxWarehouse').checked === true) {
        RentQuery = RentQuery.eq('warehouse', true);
    }
 if ($w('#checkboxBalcony').checked === true) {
        RentQuery = RentQuery.eq('balcony', true);
    }
 if ($w('#checkboxBars').checked === true) {
        RentQuery = RentQuery.eq('bars', true);
    }

    RentQuery
    .ge('rooms', minRooms)
    .le('rooms', maxRooms)
    .ge('price', minPrice)
    .le('price', maxPrice)
    .eq('isApproved', true)
    .find()
    .then((results) => {

 if (results.items.length > 0) {
            $w('#boxNoResults').hide();
            $w('#repeater1').show();
            $w('#repeater1').data = results.items;
        } else {
            $w('#repeater1').hide();
            $w('#boxNoResults').show();
        }
    })
    .catch((error) => {
        console.log(error);
    });
    console.log('here4');
}

// delete outdated posts from dataset
export async function get_deleteEventsDatabaseOldData() {
 let itemsToDelete;
 let twoMonthAgoDate = new Date(
 new Date().getFullYear(),
 new Date().getMonth() - 2, // remove after 2 months
 new Date().getDate()
    );
 let returnoptions = {
 'headers': {
 'Content-Type': 'application/json'
        }
    };
 let options = {
 'suppressAuth': true,
 'suppressHooks': true
    };
 return await wixData.query('RentRealEstate')
        .lt('_createdDate', twoMonthAgoDate)
        .find(options)
        .then((results) => {
 if (results.items.length > 0) {
                itemsToDelete = results.items;
 for (let i in itemsToDelete) {
                    wixData.remove('RentRealEstate', itemsToDelete[i]._id, options);
                }
                returnoptions.body = {
 'Status': 'Items Deleted = ' + results.items.length
                };
            }
            returnoptions.body = {
 'Status': 'No Data To Delete'
            };
        })
 // something went wrong
        .catch((error) => {
            returnoptions.body = {
 'Error': error
            };
        });
}

function getUniqueCities(items) {
 const citiesOnly = items.map(item => item.city);
 // Return an array with a list of unique cities
 return [...new Set(citiesOnly)];
}

function getUniqueType(items) {
 const uniqueType = items.map(item => item.title);
 // Return an array with a list of unique cities
 return [...new Set(uniqueType)];
}

function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return { value: curr, label: curr };
    });
}

J.D · November 14, 2020, 5:12pm

Asaf, I just don’t see where you connect the repeater elements to the data you retrieved.
I’d expect to see something like:

        $w('#repeater1').onItemReady(($item, itemData, index) => {
		$item("#image").src= itemData.image;
		$item("#buttonOpenLightbox").label= itemData.title;
		//or something like that
            $item('#buttonOpenLightbox').onClick(() => {
                wixWindow.openLightbox('LightboxRentRealEstate', itemData);
            })
 let mapsURL = 'https://www.google.co.il/maps/place/' +
                itemData.address.replace(' ', '+') +
 ',+' + itemData.city.replace(' ', '+');
 //console.log(mapsURL);
            $item('#buttonAddress').link = mapsURL;
            $item('#buttonAddress').target = '_blank';
            console.log('here3');
    });

P.S.
(+make sure the repeater is not connected to the dataset via the editor).

J.D · November 14, 2020, 5:17pm

check the usual things:

collection permissions
data exist in live collection

support cases where there’re no data to present:

 wixData.query('RentRealEstate')
    .eq('isApproved', true)  // show only approved data
    .find()
    .then((results) => {
let items = results.items;
if(items.length > 0){
        $w('#repeater1').data = items;
} else {
$w('#noResultMsg').expand();
}
    })

mathgalago · November 14, 2020, 5:34pm

@jonatandor35 This was it - a permission issue, my (dumb) mistake.

I didn’t use your first suggestion:

		$item("#image").src= itemData.image;
		$item("#buttonOpenLightbox").label= itemData.title;

but it works fine - what am I missing? you say it should not work now?

the rest was OK:

repeater was not connected to the dataset via the editor
data exists in live collection

but I also learned to support cases where there’re no data to present - Thanks for this as well

problem solved!

J.D · November 14, 2020, 5:42pm

I’m not saying that. Since I don’t have an access to your editor and I can’t see what you did there (+I don’t know how your repeater should look like), I tried some guess regarding what could be a problem.
But if it works for you as it is with no errors, it probably fine.

P.S
I’ve just clicked your link, and I can see that even though it’s working now, you still get an error :

wixImage.js:52 Uncaught TypeError: Cannot read property 'dataset' of null

So you should locate the problem and fix it.

Topic		Replies	Views
Help Populating a Repeater with Query Data Ask the community code , question	5	928	September 22, 2019
Async, Promises, Await issue Ask the community code , question	8	264	April 30, 2020
wixData.Query exclusively returns 'undefined' value Ask the community code , question	9	1739	March 8, 2018
(RESOLVED) WixData.query() returning no items Ask the community code , question	4	600	February 28, 2021
My repeater is not populating with the query() code I wrote. Ask the community code , question	3	125	August 30, 2022

problem with promise?

Related topics