Sort multiple fields based on selection

Question

I have a dropdown that can be toggled to 3 states - ascending, descending and none. The dropdown rearranges the items in my list.

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 value in toggle is true, the items are arranged in ascending order. When the value in toggle is false, it is in descending order.

How do I implement the sort function in the order of toggle values left to right? (For example, if price comes before position, etc.) And as the labels contain different type of values, how do I detect the type and sort accordingly?

I've found this How to sort an array of objects with labels according to other array of labels? but it doesn't seem to be working.

Updated answer (but 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;

}

Isit because I'm not retrieving the entire list to sort? Thanks for your help!

Gokul Prasannan · Accepted Answer · 2020-11-26 07:40:13Z

1

list = list.sort((a:any, b:any) => {
    if(a.label !== b.label){ // if labels are not equal sort by label
        return a.label.localeCompare(b.label) 
    }
    if(typeof toggle[a.label] == 'boolean'){
      if(toggle[a.label])
        return a.value.localeCompare(b.value)
      else
        return b.value.localeCompare(a.value)
    } else {
      return 0
    }
    }

edited Nov 26, 2020 at 7:40

answered Nov 26, 2020 at 5:07

Gokul Prasannan

3171 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

iBlehhz Over a year ago

hi gokul, thank you for your solution. the list is not sorting according to the labels though, like "price" is ascending and "active" is descending

Gokul Prasannan Over a year ago

Oh i get it you want to sort all entries with label 'Price' in ascending , with label 'Active' in descending like that right?

Gokul Prasannan Over a year ago

i think this is what you are looking for.But this sorts the array based on labels also

iBlehhz Over a year ago

hi I've updated my post, the list still doesn't seem to be updating. The code you've given looks correct though, is it cause I'm not retrieving the entire list to sort?

Gokul Prasannan Over a year ago

check now it was because a - b cannot be used to compare two strings

|

Collectives™ on Stack Overflow

Sort multiple fields based on selection

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related