Hide text element if same as previous repeater item

Ask the community
,
1

I have a repeater where one text element (left side, in grey color) is linked to a text field called “date” in the Schedule collection. I want that text element to only show on the first item that has that specific date.

ie. 2 items are on 2019.08.01, but I want only the first item to have 2019.08.01 visible. The text element should be hidden on the second item with the same date.

1674×1270 227 KB

Is it possible to achieve with code? Thanks a lot.

2

@ Jenny Nguyen This is how you could do it if you’re using a dataset. The idea is to use the forEachItem function and store the previous date and do a comparison for each item of the repeater.

$w.onReady(function () {
    $w("#dataset1").onReady((event) => {
        let prevDate = "";
        $w("#repeater").forEachItem(($item, itemData, index) => {
            if (itemData.date === prevDate) {
                $item("#date").hide();
            }
            prevDate = itemData.date;
        });
    })  
});
3

Hi anthonyb,

Thank you for your answer, it works! I also have a small question:

The code you give works perfectly with the dataset, but because I have an optional filter that comes with the dataset, so when filtered, the code does not work as expected anymore.

2124×762 77.6 KB

Code for the filter is as below:
Dropdown1 is for Category filter
Dropdown2 is for Member filter
sort ascending by time

import wixData from 'wix-data';

export function searchButton_click(event) {
     search();
}

function search() {

    const monthfind = $w("#dynamicDataset").getCurrentItem().title;   
    wixData.query("Schedule")
        .contains("month1", monthfind)
        .contains("tag", String($w("#dropdown1").value))
        .and(wixData.query("Schedule").contains("member", String($w("#dropdown2").value)))
        .ascending("thiGian")

        .find()
        .then(results => {
            $w("#repeater1").data = results.items;
 });
}

Any idea where I should fix the code?

4

@huonggiangnguyen2305 Putting the forEachItem code in a separate function that you call after the new results display from a new filter would be the way to do it.

$w.onReady(function(){
	$w("#dataset1").onReady((event)=> {
		HideDuplDates();
	})
});

function HideDuplDates(){
	let prevDate="";
	$w("#repeater").forEachItem(($item,itemData,index) =>{
		if(itemData.date === prevDate{
			$item("#date").hide();
		}
		prevDate = itemData.date;
	});
}

$w("#repeater1").data = results.items;
HideDuplDates();

If I’m understanding you correctly, you are using both a dataset and wixData.query for the repeater. That is often problematic. Looks like you are comfortable enough writing query code. You might as well originally populate the repeater with query results.

5

@tony-brunsman Hi anthonyb, the code works fine when displaying the repeater at first, but when filtered, seems like it remembers the positions from the beginning but not actually adjusting according to the filter.

Before filtered:

2124×954 200 KB

After filtered, the first few entries do not have dates at all:

2124×954 200 KB

My current code:


import wixData from 'wix-data';

export function searchButton_click(event) {
     search();
}

function search() {

    const monthfind = $w("#dynamicDataset").getCurrentItem().title;   
    wixData.query("Schedule")
        .contains("month1", monthfind)
        .contains("tag", String($w("#dropdown1").value))
        .and(wixData.query("Schedule").contains("member", String($w("#dropdown2").value)))
        .ascending("thiGian")

        .find()
        .then(results => {
            $w("#repeater1").data = results.items;
            HideDuplDates();
 });
}

$w.onReady(function(){
    $w("#dataset14").onReady( (event)=> {
        HideDuplDates();
    })
});

function HideDuplDates(){
    let prevDate = "";
    $w("#repeater1").forEachItem(($item, itemData, index) =>{
        if(itemData.date === prevDate) {
            $item("#text11").hide();
        }
        prevDate = itemData.date;
    });
}
6

@huonggiangnguyen2305 To reiterate, I don’t trust the mixing of dataset and wixData.query approaches with the same repeater. Either filter the dataset directly with the dataset setFilter function , or populate the repeater from the start via wixData.query results along with the filtering function above.