Angular 2+ how to sort data array with nested property and not-nested properties at the same time?

Question

I have a table including 6 columns which contains data from a root array:

  columns: any[] = [{ sortBy: 'startTime', title: 'Order Date' }, { sortBy: 'btcAmount', title: 'BTC' },
  { sortBy: 'btcPrice', title: 'Rate' }, { sortBy: 'total', title: 'Total' },
  { sortBy: 'status', title: 'Status' }, { sortBy: 'paymentResult.updated', title: 'Payment Date' }];

The first 5 columns are able to sort properly, while the last column Payment Date sorted by paymentResult.updated contains data as a nested property in the same root array (this.transactions) that is not able to sort accordingly. This is my sort function:

sort(property = 'startTime') {
    this.column = property;
    this.isDesc = !this.isDesc;
    this.direction = this.isDesc ? 1 : -1;
    this.transactions.sort((a, b) => {
      if (a === null) return -1;
      if (b === null) return 1;
      if (a[property] === b[property]) return 0;
      return a[property] < b[property] ? -1 * this.direction : 1 * this.direction;
    });
  }

This is the data structure of the array:

{
  "id": "string",
  "status": "Open",
  "startTime": "2017-12-11T09:43:45.534Z",
  "validUntil": "2017-12-11T09:43:45.534Z",
  "btcAmount": 0,
  "btcPrice": 0,
  "total": 0,
  "paymentResult": {
    "id": "string",
    "status": "Paid",
    "updated": "2017-12-11T09:43:45.534Z"
  }      
}

This is the view:

<table class="table table-responsive table-hover" *ngIf="transactions" >
        <thead class="thead-default">
          <tr>
            <th *ngFor="let columnName of columns" 
                (click)="sort(columnName.sortBy)">
              {{columnName.title}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let transaction of transactions>
            <td>{{ transaction.startTime | date: 'short' }}</td>
            <td>{{ transaction.btcAmount.toFixed(6) }}</td>
            <td>{{ transaction.btcPrice | currency:'USD':true }}</td>
            <td>{{ transaction.total | currency:'USD':true }}</td>
            <td>{{ transaction.status }}</td>
            <td> {{transaction.paymentResult?.updated}}</td>
          </tr>
        </tbody>
      </table>

Oleksandr Poshtaruk · Accepted Answer · 2017-12-12 11:46:21Z

1

Kind of this I guess - just check whether it is nested property, if yes - iterate properties one by one till find the value:

sort(property = 'startTime') {
    this.column = property;
    this.isDesc = !this.isDesc;
    this.direction = this.isDesc ? 1 : -1;
    this.transactions.sort((a, b) => {
    let a1 = a;
    let b1 = b;
    if(property.indexOf('.') > -1) {
     let keys = property.split('.');
     keys.forEach((key) => {
       if(a1 == null) return -1;
       if (b1 === null) return 1;
       a1 = a1[key];
       b1 = b1[key];
     })
    }
      if (a === null) return -1;
      if (b === null) return 1;
      if (a1 === b1) return 0;
      return a[property] < b[property] ? -1 * this.direction : 1 * this.direction;
    });
  }

Not tested, but the idea is clear.

edited Dec 12, 2017 at 11:46

answered Dec 11, 2017 at 10:35

Oleksandr Poshtaruk

2,20618 silver badges20 bronze badges

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

2 Comments

Hoàng Nguyễn Over a year ago

this is a nice idea, but the property this.transactions.paymentResult sometimes can be null, so the console will return error like Cannot read property 'updated' of null

Hoàng Nguyễn Over a year ago

I made a solution by mapping the nested property into a not-nested property then I can sort the array as usual. Thank you for you solution anyway.

Collectives™ on Stack Overflow

Angular 2+ how to sort data array with nested property and not-nested properties at the same time?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related