Display 3 dates in repeater from same database entry.

Ask the community
,
1

Hi team,

I’m trying to display 3 dates from the same entry in a database but seem to be getting stuck, below os the code and it all works until I try to display any more than one date. To clarify I want three containers with all the same info apart from the dates, which would be different.

$w.onReady(function () {
    wixData.query('Courses')
        .eq('title', 'Aonach Eagach Guided Traverse')
        .find()
        .then((results) => {
 if (results.totalCount > 0) {
                $w('#repeater2').data = results.items;
                $w('#repeater2').forEachItem(($item, itemData, index) => {
 for (let i = 1; i <= 3; i++) {
 let date1 = itemData.dateone.toLocaleString();
 let date2 = itemData.dateTwo.toLocaleString();
 let date3 = itemData.datethree.toLocaleString();
                        $item('#price').text = '£' + itemData.individaulPrice;
                        $item('#duration').text = itemData.duration;
                        $item(`date${i}`).text = date1, date2, date3;
                    }

                })
            }
        })
});

504×540 47 KB

Would anyone be able to help?

Thank you!

2

Hi,

I believe your problem is that you didn’t connect the repeater’s elements to their data.
Using ‘$w(’#repeater2’).data = results.items’ means that you didn’t connect the repeater’s items directly to a dataset according to this article:
https://support.wix.com/en/article/about-displaying-database-content-in-a-repeater

As a result, it has to be done by code. Add an onItemReady() function that runs when a new repeated item is created, view the API for more information https://www.wix.com/corvid/reference/$w.Repeater.html#onItemReady and determine the contact of each element.

View this code and implement it in your site:


$w.onReady(function () {
    setDates();
})

async function setDates() {
 let results = await wixData.query('Courses').eq('title', 'Aonach 
 Eagach Guided Traverse').find();
 if (results.totalCount > 0) {
        //This will triggered the onItemReady() function
        $w('#repeater2').data = results.items;                           
        $w('#repeater2').forEachItem(($item, itemData, index) => {
 for (let i = 1; i <= 3; i++) {
 let date1 = itemData.dateone.toLocaleString();
 let date2 = itemData.dateTwo.toLocaleString();
 let date3 = itemData.datethree.toLocaleString();
                $item('#price').text = '£' + itemData.individaulPrice;
                $item('#duration').text = itemData.duration;
                $item(`date${i}`).text = date1, date2, date3;
            }
        })

    }
}

export function repeater2_itemReady($item, itemData, index) {
    $item(".....") = itemData.

}

Best of luck!
Sapir

3

@sapirh thank you for the detailed response and code, very much appreciated! I have tried to implement but there is still only the price and duration that fill in and only one container will populate.

import wixData from 'wix-data';

$w.onReady(function () {
    setDates();
})

async function setDates() {
 let results = await wixData.query('Courses').eq('title', 'Aonach Eagach Guided Traverse').find();
 if (results.totalCount > 0) {
 //This will triggered the onItemReady() function
        $w('#repeater2').data = results.items;                           
        $w('#repeater2').forEachItem(($item, itemData, index) => {
 for (let i = 1; i <= 3; i++) {
 let date1 = itemData.dateone.toLocaleString();
 let date2 = itemData.dateTwo.toLocaleString();
 let date3 = itemData.datethree.toLocaleString();
                $item('#price').text = '£' + itemData.individaulPrice;
                $item('#duration').text = itemData.duration;
                $item(`date${i}`).text = date1, date2, date3;
            }
        })

    }
}

export function repeater2_itemReady($item, itemData, index) {
    $item("#price").text = itemData.individaulPrice;
    $item("#duration").text = itemData.duration;
}

Again, thank you for your help, my skills have come a long way with help in this community but this is stumping me! I can obviously get the date to populate if I just use one fieldKey i.e.

$item('#date').text = date1;

But it confusing me as the 3 date fields are in the same Item

1920×1080 394 KB

Any help would be much appreciated :slight_smile:

4

Hi,

In the onItemReady() function you need to write all the items that inside the repeater besides the ‘duration’ and ‘price’ that are calculated separately.

Best,
Sapir

5

Hi @sapirh

This code works

async function setDatesCurrYear() {
 let results = await wixData.query('Courses').eq('title', 'Aonach Eagach Guided Traverse').find();
 if (results.totalCount > 0) {
 let item = results.items[0];
 // getting the date and arranging in each object
 let data = [{
            date: item.dateone.toUKDateString(),
        }, {
            date: item.dateTwo.toUKDateString(),
        }, {
            date: item.datethree.toUKDateString(),
        }, {
            date: item.dateFour.toUKDateString(),
        }, {
            date: item.dateFive.toUKDateString(),
        }, {
            date: item.dateSix.toUKDateString(),
        }]
 // creating a random ID in ._id
        data.forEach((el, i) => data[i]._id = gettRandomID())
        $w('#repeater2').data = data;
        $w('#repeater2').onItemReady(($item, itemData, index) => {
            $item('#price').text = '£' + item.individaulPrice;
            $item('#duration').text = item.duration;
            $item('#date').text = itemData.date;
        })
    }
}

Thanks for your help