Angular 2: Sort array based on the attribute of the nested object

Question

Following is my JSON data

   {
  "items": [
    {
      "id": 26,
      "email": "[email protected]",
      "firstName": "Poornima ",
      "lastName": "karuppu",
      "role": "Student",
      "studentDetails": {
        "discipline": "History",
        "currentDegree": "Master",
        "currentSemester": 58
      },
      "fullName": "Poornima  karuppu"
    },
    {
      "id": 149,
      "email": "[email protected]",
      "firstName": "raj",
      "lastName": "naga",
      "role": "Student",
      "studentDetails": {
        "discipline": "German Lingustics",
        "currentDegree": "Master",
        "currentSemester": 5
      },
      "fullName": "raj naga"
    },
    {
      "id": 134,
      "email": "[email protected]",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": {
        "discipline": "History",
        "currentDegree": "Master",
        "currentSemester": 15
      },
      "fullName": " "
    },
    {
      "id": 20,
      "email": "[email protected]",
      "firstName": "null",
      "lastName": "null",
      "role": "Student",
      "studentDetails": {
        "discipline": "History and Arts",
        "currentDegree": "Master",
        "currentSemester": 4
      },
      "fullName": "null null"
    },
    {
      "id": 184,
      "email": "[email protected]",
      "firstName": "Rob",
      "lastName": "Pat",
      "role": "Student",
      "studentDetails": {
        "discipline": "Computer Science",
        "currentDegree": "Bachelor",
        "currentSemester": 25
      },
      "fullName": "Rob Pat"
    },
    {
      "id": 151,
      "email": "[email protected]",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": {
        "discipline": "Art",
        "currentDegree": "Master",
        "currentSemester": 5
      },
      "fullName": " "
    },
    {
      "id": 3,
      "email": "[email protected]",
      "firstName": "Lamija",
      "lastName": "Halvadzija",
      "role": "Student",
      "studentDetails": {
        "discipline": "Lingustics",
        "currentDegree": "Master",
        "currentSemester": 5
      },
      "fullName": "Lamija Halvadzija"
    },
    {
      "id": 25,
      "email": "[email protected]",
      "firstName": "Rolans",
      "lastName": "Mustermann",
      "role": "Student",
      "studentDetails": {
        "discipline": "Linguistics",
        "currentDegree": "Bachelor",
        "currentSemester": 2
      },
      "fullName": "Rolans Mustermann"
    },
    {
      "id": 178,
      "email": "[email protected]",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 140,
      "email": "[email protected]",
      "firstName": "Nilakshi",
      "lastName": "Naphade",
      "role": "Student",
      "studentDetails": null,
      "fullName": "NN"
    },
    {
      "id": 40,
      "email": "[email protected]",
      "firstName": "P",
      "lastName": "K",
      "role": "Student",
      "studentDetails": null,
      "fullName": "PK"
    }

  ],
}

Its a students' list that I am dispalying on UI using GET API. I am sorting these records using angular 2 pipe. Following is sort.pipe.ts code:

import { Injectable, Pipe, PipeTransform } from '@angular/core';

import { User } from '../../../core/user/user.model';

@Pipe({
  name: 'hipUsersSorter'
})
@Injectable()
export class UsersSorter implements PipeTransform {
  transform(users: any, key: string, direction: number): User[] {
    if (key !== '' && users !== null) {
      users.sort(
        (a: any, b: any) => {
          if (a[key] < b[key]) {
            return -1 * direction;
          } else if (a[key] > b[key]) {
            return 1 * direction;
          } else {
            return 0;
          }
        }
      );
    }
    return users;
  }
}

Using this pipe, I am able to sort data based on firstName, lastName and email fields. However, I am not able to sort the records based on nested attributes viz. discipline, currentDegree and currentSemester. Following is HTML template from where I am calling this sort pipe:

<table>
      <thead>
        <tr>
          <th (click)="sort('lastName')">{{ 'last name' | translate }}</th>
          <th (click)="sort('firstName')">{{ 'first name' | translate }}</th>
          <th (click)="sort('email')">{{ 'email' | translate }}</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of students | hipUsersFilter: query: selectedOption: selectedRole | hipUsersSorter: key: direction
                  | paginate: { id: 'server', itemsPerPage: 10, currentPage: _page, totalItems: _total }">
          <td>{{ user.lastName }}</td>
          <td>{{ user.firstName }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.studentDetails.discipline }}</td>
          <td>{{ user.studentDetails.currentDegree }}</td>
          <td>{{ user.studentDetails.currentSemester }}</td>
        </tr>
      </tbody>
    </table>

This is my sort function in component:

direction = -1;

sort(value: string) {
    this.direction = this.direction * -1;
    this.key = value;
}

How can I sort the data based on these nested fields? Can someone please provide their inputs on this issue? Thanks in advance

Please, read this: angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe — JB Nizet
– JB Nizet, Commented Feb 22, 2017 at 23:44

developer033 · Accepted Answer · 2017-02-23 00:16:39Z

2

I'd create a method passing the obj and the nested 'path', as below:

import { Injectable, Pipe, PipeTransform } from '@angular/core';

import { User } from '../../../core/user/user.model';

@Pipe({
  name: 'hipUsersSorter'
})
@Injectable()
export class UsersSorter implements PipeTransform {
  transform(users: any, key: string, direction: number): User[] {
    if (key && users !== null && users.length > 0) {
      users.sort(
        (a: any, b: any) => {
          const propertyA: number|string = this.getProperty(a, key);
          const propertyB: number|string = this.getProperty(b, key);

          if (propertyA < propertyB) {
            return -1 * direction;
          } else if (propertyA > propertyB) {
            return 1 * direction;
          } else {
            return 0;
          }
        }
      );
    }
    return users;
  }

  private getProperty (value: { [key: string]: any}, key: string): number|string {
    if (value == null || typeof value !== 'object') {
      return undefined;
    }

    const keys: string[] = key.split('.');
    let result: any = value[keys.shift()];

    for (const key of keys) {
      if (result == null) { // check null or undefined
        return undefined;
      }

      result = result[key];
    }

    return result;
  }
}

In your template:

<th (click)="sort('studentDetails.discipline')">{{ 'discipline' | translate }}</th>
<th (click)="sort('studentDetails.currentDegree')">{{ 'degree' | translate }}</th>
<th (click)="sort('studentDetails.currentSemester')">{{ 'semester' | translate }}</th>

Simple demo: DEMO.

edited Feb 23, 2017 at 0:16

answered Feb 22, 2017 at 23:59

developer033

25k8 gold badges85 silver badges113 bronze badges

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

5 Comments

Nilakshi Naphade Over a year ago

It is working for the records having studentDetails not null. But my complete JSON data has many records where studentDetails = null and in this case it is not working. :(

developer033 Over a year ago

You didn't mention it in your question :) What are you expecting for those that have null values? Feel free to fork the demo to include your null objects.

Nilakshi Naphade Over a year ago

Sorry for not mentioning it. I have added all the JSON data in above question. I did not changed/forked the plunker.

developer033 Over a year ago

Well, the method above works fine while handling null values.. your problem is probably in template.. use the safe-navigation operator this way: <td>{{ user.studentDetails?.discipline }}</td>

Nilakshi Naphade Over a year ago

Hey it worked.I have somehow forgot to add a result statement in getProperty method. So the result was coming undefined. Thanks a lot :)

Collectives™ on Stack Overflow

Angular 2: Sort array based on the attribute of the nested object

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related