CODEWITHSUNDEEP
angulartypescript
Whistler
Whistler

Reputation: 1977

How can I order ngFor output based on another array?

I have a data which includes output from 2 shifts with a pastern 8-20 and 20-8. So I have filtered output using ngx-pipes now I need to order Night Shift hours from 20pm to 7am in the morning.

I have an array which specify the correct order of the hours. 

shiftSelection = [
{
  name: "Day Shift",
  hours: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
},
{
  name: "Night Shift",
  hours: [20, 21, 22, 23, 0, 1, 2, 3, 4, 5, 6, 7]
}]

data = [
    {
      "lineId": 1,
      "hour": 0,
      "input": 9136,
      "output": 8850
    }, 
    ... 
    {
      "lineId": 1,
      "hour": 23,
      "input": 9136,
      "output": 8850,
    }]

How can I order ngFor output based on another array? 

<div *ngFor="let row of data | filterBy: ['hour']: currShift.hours :1 | groupBy: 'lineId' | pairs">
    <span class="group-title">Line {{row[0]}}</span>
    <ng-container *ngFor="let cell of row[1]"> 
        <span class="cell" matTooltip="{{cell | json}}">{{cell.output}} 
        </span>
    </ng-container>
</div>

Something like this would be perfect:

*ngFor="let cell of row[1] | orderBy: currShift"

https://stackblitz.com/edit/angular-lckecp

Upvotes: 1

Views: 323

Answers (1)

Whistler
Whistler

Reputation: 1977

The answer was to create a custom pipe. Thanks Amir for suggestion.

@Pipe({ name: 'orderByArray' })
export class OrderByArrayPipe implements PipeTransform {

    transform(array: Array<Cell>, orderByArray: Array<number>): Array<Cell> {

   var orderedArray = array.slice().sort(function (a, b) {
     return orderByArray.indexOf(a.hour) - orderByArray.indexOf(b.hour);
   });

   return orderedArray;
   }
}

and use it that way:

<ng-container *ngFor="let cell of row[1] | orderByArray: currShift.hours">

Upvotes: 1

Related Questions