There is a dropdown feature in my application that has three states - ascending, descending, and none. This dropdown is responsible for rearranging the items in a list.
https://i.sstatic.net/xYIfM.png
This is my code:
list.component.html
<div *ngFor="let item of items; index as i">
<ui-list-item
[body]=getItem(item)"
></ui-list-item>
</div>
list.component.ts
getItem(item){
const toggle = {Price: true, Active: false, Modifiers: true}
let list = [
{label:"Price", value:item.price}, // e.g. "$10.00"
{label:"Active", value:item.active}, // e.g. true
{label:"Position", value:item.position} // e.g. 1
{label:"Category", value:item.category} // e.g. "Food"
];
return list;
}
When the toggle value is true, the items are sorted in ascending order. If the toggle value is false, then the order is descending.
I am looking to implement a sort function based on the toggle values from left to right. Additionally, as the labels contain various value types, I need to detect the type and arrange the items accordingly.
I came across this helpful resource How to sort an array of objects with labels according to other array of labels?, but it doesn't seem to be solving my issue.
Here is my updated answer (still not working):
getItem(item){
const toggle = {Price: true, Active: false, Modifiers: true}
let list = [
{label:"Price", value:item.price}, // e.g. "$10.00"
{label:"Active", value:item.active}, // e.g. true
{label:"Position", value:item.position} // e.g. 1
{label:"Category", value:item.category} // e.g. "Food"
];
list = list.sort((a: any, b: any) => {
if (typeof toggle[a.label] === 'boolean') {
if (toggle[a.label]) return a.value - b.value;
else return b.value - a.value;
} else {
return 0;
}
});
return list;
}
Could the issue be that I am not fetching the entire list to perform the sort function? Thank you for your assistance!