Create subgroups in list repeater

Ask the community
,
4

As I said before, you need to sort the items array before assigning it to the rapeater’s data, here’s an example of the array:

const items = [
    {
        _id: <the item ID>,
        class: 'cat',
        main: false
    },
    {
        _id: <the item ID>,
        class: 'dog',
        main: false
    }
];

Now you need to filter the items by their types:

const cats_arr = items.filter(items => items.class === 'cat');
const dogs_arr = items.filter(items => items.class === 'dog');

const cats = [{ _id: '1', main: true, label: 'Cats' }, ...cats_arr];
const dogs = [{ _id: '1', main: true, label: 'Dogs' }, ...dogs_arr];

Now combine all the types into one array.

const newArr = [...cats, ...dogs];

Bind the right data: To do that, we set two collapsed boxes in the repeater’s container, the first one “labelBox” will only have a text element for the title, and the second one will include the childeren elements you want to show (e.g., image, title, etc…)

$w('#rep').onItemReady(($item, data) => {
    if (data.main) {
        $item('#mainTitle').text = data.label;
        $item('#labelBox').expand();
    }
    
    /* The data item isn't a label, so we need to bin the data now, then expand
    the data section. */
    
    // Bind the data here ...
    
    // Expand the data section
    $item('#dataBox').expand();
})