각도 2 : 다음은 중첩 된 객체

의 속성에 따라 정렬 배열 내 JSON 데이터 각도 2 : 다음은 중첩 된 객체

{ 
    "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": "Nilakshi Naphade" 
    }, 
    { 
     "id": 40, 
     "email": "[email protected]", 
     "firstName": "Poornima", 
     "lastName": "Karuppasamy", 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": "Poornima Karuppasamy" 
    }, 
    { 
     "id": 5, 
     "email": "[email protected]", 
     "firstName": "Nilakshi", 
     "lastName": "Naphade", 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": "Nilakshi Naphade" 
    }, 
    { 
     "id": 181, 
     "email": "[email protected]", 
     "firstName": null, 
     "lastName": null, 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": " " 
    }, 
    { 
     "id": 170, 
     "email": "[email protected]", 
     "firstName": null, 
     "lastName": null, 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": " " 
    }, 
    { 
     "id": 38, 
     "email": "[email protected]", 
     "firstName": "Nilakshi_UPB", 
     "lastName": "Naphade", 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": "Nilakshi_UPB Naphade" 
    }, 
    { 
     "id": 179, 
     "email": "[email protected]", 
     "firstName": null, 
     "lastName": null, 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": " " 
    }, 
    { 
     "id": 175, 
     "email": "[email protected]", 
     "firstName": null, 
     "lastName": null, 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": " " 
    }, 
    { 
     "id": 117, 
     "email": "[email protected]", 
     "firstName": null, 
     "lastName": null, 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": " " 
    }, 
    { 
     "id": 185, 
     "email": "[email protected]", 
     "firstName": null, 
     "lastName": null, 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": " " 
    }, 
    { 
     "id": 155, 
     "email": "[email protected]", 
     "firstName": null, 
     "lastName": null, 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": " " 
    }, 
    { 
     "id": 174, 
     "email": "[email protected]", 
     "firstName": null, 
     "lastName": null, 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": " " 
    }, 
    { 
     "id": 53, 
     "email": "[email protected]", 
     "firstName": "Nilakshi_GMAIL", 
     "lastName": "Naphade", 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": "Nilakshi_GMAIL Naphade" 
    }, 
    { 
     "id": 22, 
     "email": "[email protected]", 
     "firstName": "null", 
     "lastName": "null", 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": "null null" 
    }, 
    { 
     "id": 176, 
     "email": "[email protected]", 
     "firstName": null, 
     "lastName": null, 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": " " 
    }, 
    { 
     "id": 169, 
     "email": "[email protected]", 
     "firstName": null, 
     "lastName": null, 
     "role": "Student", 
     "studentDetails": null, 
     "fullName": " " 
    } 
    ], 
}

입니다 그것의 내가 GET API를 사용하여 UI에 dispalying 오전 학생들의 목록입니다. 각도 2 파이프를 사용하여 이러한 레코드를 정렬합니다. 다음은 sort.pipe.ts 코드 :

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; 
    } 
}

이 파이프를 사용하여, 나는 이름, 성 및 이메일 필드를 기반으로 데이터를 정렬 할 수 있어요. 그러나 중첩 된 특성을 기반으로 레코드를 정렬 할 수는 없습니다. 규율, currentDegree 및 currentSemester. 나는 이런 종류의 파이프를 호출하고있는 곳에서 HTML 템플릿은 다음과 같은 :

<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>

이것은 구성 요소의 내 정렬 기능 :

direction = -1; 

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

어떻게이 중첩 된 필드를 기반으로 데이터를 정렬 할 수 있습니까? 누군가이 문제에 대한 의견을 제공 할 수 있습니까? 사전에 덕분에

출처

2017-02-22 Nilakshi Naphade

다음을 읽어보십시오. https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe –

나는 다음과 같이하는 방법하여 obj와 중첩 '경로' 전달을 만들 것입니다 :

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; 
    } 
}

당신의 템플릿에서 :

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

간단한 데모 : DEMO.

출처

2017-02-22 23:59:52 developer033

studentDetails가 null이 아닌 레코드의 경우 작동합니다. 하지만 완전한 JSON 데이터에는 studentDetails = null 인 많은 레코드가 있으며이 경우 작동하지 않습니다. : –

당신은 당신의 질문에 언급하지 않았다 :) 당신은 null 값을 가진 사람들을 위해 무엇을 기대하고 있습니까? * null *'objects'를 포함하도록 데모를 포크하십시오. – developer033

죄송하지만 언급하지 않으 셨습니다. 위의 질문에 모든 JSON 데이터를 추가했습니다. 나는 변하지 않았고 멍청이를 갈랐다. –

각도 2 : 다음은 중첩 된 객체

답변

관련 문제