Угловые пользовательские фильтры для некоторых вложенных объектов JSON

Question

Я хочу использовать угловой фильтр для пользователей на основе их MAC-адреса для устройств, которые они используют в настоящее время.У меня есть некоторые данные JSON и мой пробный настраиваемый фильтр, с которым мне нужна помощь.

Мой пробный настраиваемый фильтр:

  getCurrentUser(): User {
    return USERS.filter((user) => user.devices, mac_id == 44:44:44:44:44)[0];
  }

export const USERS: User[] = [
  {
    id: 1,
    email: 'yacie.qbi.com',
    pword: '123',
    fname: 'Tatenda Y',
    lname: 'Gatsi',
    date: '2012-10-16T17:57:28.556094Z',
    sa: 1,
    devices: [
      {
        mac_id: '33:33:33:33:33',
        imei: 91011,
        fone_no: 8888,
      }
    ]
  },
  {
    id: 2,
    email: 'chiko.qbi.com',
    pword: '123',
    fname: 'Tatenda Y',
    lname: 'Gatsi',
    date: '2015-09-16T02:00:28.015982Z',
    sa: 1,
    devices: [
      {
        mac_id: '44:44:44:44:44',
        imei: 91011,
        fone_no: 8888,
      }
    ]
  }
]

Я ожидаю получить такие результаты, как: идентификатор пользователя и Mac_id в HTML, например

  <mat-card *ngIf="user" fxFlex>
    <mat-card-content>
      <div>User ID: {{user.id}}</div>
      <div>Current MAC Address: {{user.devices.mac_id}}</div>
    </mat-card-content>
  </mat-card>

Answer 1

Основываясь на дополнительной информации из комментариев, вы хотите отобразить одного пользователя с mac_id из '44:44:44:44:44'.

Ваша функция фильтра неверна.devices - это массив, и вы не ищете этот массив.Вы можете использовать Array.some () , чтобы узнать, дал ли хотя бы одно устройство mac_id.

getCurrentUser(): User { 
  // Only returning first user from filtered users.
  return USERS.filter(user => 
    user.devices.some(item => item.mac_id === '44:44:44:44:44'))[0];
} 

. Затем измените свой HTML, чтобы отобразить этого пользователя.devices[0] дает первое устройство в массиве devices.

<mat-card *ngIf="user" fxFlex>
  <mat-card-content>
    <div>User ID: {{user.id}}</div>
    <div>Current MAC Address: {{user.devices[0].mac_id}}</div>
  </mat-card-content>
</mat-card>