Sorting arrays used in repeaters

Ask the community
,
1

Hi to all you JS/Corvid gurus,

Somehow I do not get to sort my data that is to be used in a repeater. Data is well received, but in unsorted order. The “.ascending” sort in the query is ignored by the “for each” in the function connecting repeater items to data.

Could somebody please provide guidance, where and how to sort the arrays, so that data in the repeater are shown alphabetically according to a field value (in this case “last name” (nachname))?

Thanks in advance for any guidance!

Here is my code …

export function selector_change(event) {
$w.onReady(async function () {        
let source = "ABC"
let migrationDate = new Date(1597046025296)
let criterion = $w('#selector').value
if (criterion ==="all") {
    let result = await
        wixData.query(source)
         .ascending("nachname")
         .le("kundeSeit",migrationDate)        
         .find()
         await result
         $w('#repeater').data = result.items
         connectRepeater(result.items)
        }
 if (criterion ==="active") {
     let result = await
        wixData.query(source)
            .ascending("nachname")
            .le("kundeSeit",migrationDate)
            .eq("hasLoggedIn", true)
            .find()
            await result
            $w('#repeater').data = result.items
            connectRepeater(result.items)
        }
    });
}

function connectRepeater (repeaterItems){
$w('#repeater').forEachItem(($w,itemData,index) => {
    $w('#vorname').text = repeaterItems[index].vorname
    $w('#nachname').text = repeaterItems[index].nachname
    $w('#hasLoggedIn').checked = repeaterItems[index].hasLoggedIn
     let dateMs = new Date (repeaterItems[index].kundeSeit)
     let kundeSeit = new Date(dateMs).toLocaleDateString()
    $w('#kundeSeit').text = kundeSeit
})
}
2

There’s probably an easier way to do this via Wix widgets etc.

But, since you seem to populate the repeater items via code, I think it should work if you just sort your own results, then load the repeater with the sorted result. You can also easily sort ascending or descending with a click of the same button.

You can sort a table by any column with this function
(+1 sorts ascending, and -1 sorts descending):

function dynamicSort(property) {
    var sortOrder = 1;
    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }
    return function (a,b) {
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result * sortOrder;
    }
}

So, if you want to sort a table called “#table1” by last name, you can call the function above like this:

This function sorts entire table by last name - the flag “flagLast” allows you to use the same button and function to sort alternately ascending or descending:

export function buttonSortLast_click(event) {
	var tableObj = $w("#table1").rows;
	if ( flagLast === 1 ) {							
		tableObj.sort(dynamicSort("last"));
		$w("#table1").rows = tableObj;
	} else if ( flagLast === -1 ) {
		tableObj.sort(dynamicSort("-last"));
		$w("#table1").rows = tableObj;
	}
	flagLast = flagLast * (-1);
}
3

@brainstorrrm

Hi brainstorrm,

Thanks for this. I am not using a table, because I need to provide for user input, e.g., to select items to contact via mail.

I have seen the dynamicSort function, but probably am too new to JS for this.

In my array results.items what would be the property (results.items.nachname?) and what would be a and b?

4

Thomas, it’s pretty simple.
Do not touch the dynamicSort function - you can leave it as is.

You pass to the dynamic Sort function what you need sorted.

  • and it’s easiest if you do it before you write results to the repeater:
            // sort result.items first, then ...
            
            $w('#repeater').data = result.items
            connectRepeater(result.items)

So, perhaps something like this:

result.items.sort(dynamicSort("nachname"));
// now write sorted variable back to the repeater:
$w('#repeater').data = result.items;
// connect repeater to the result array:
connectRepeater(result.items)
5

@brainstorrrm

I truly HATE to use things I do not fully understand (a, b, property), but it works. So I owe you a big “THANK YOU!” :grinning:

Time to learn … :slight_smile:

6

@info56409 It may look a bit abstract at first glance, but it really isn’t.
JavaScript Sorting Arrays
[JavaScript Array Sort](JavaScript Sorting Arrays JavaScript Array Sort)

7

It took me a while to find your solution, but I thank you very much for it. It seems odd that wix hasn’t incorporated the same filter/sort interface into queryReferenced as in query. I’m sure there’s some technical/priority reason for it. The advantage of using the same interface as with query would make it much more flexible and consistent. Nevertheless, thanks