Фильтр объекта ответа в Angular

Question

Я делаю пост-запрос и хотел бы отфильтровать ответ объекта, чтобы получить некоторые данные на основе условия, поэтому в своем ответе на объект мне нужно отфильтровать и найти массив объектов для интернет-банкинга на основемой поиск в Google, вот что я пытался:

объект ответа:

{
  "header":
  {
    "serviceId":"xxx",
    "productCode":"xxx",
    "transactionId":"xxx"
  },
  "data":
  {
    "items":
    [
      {
        "paymentModel":"Retail Banking",
        "paymentChannels":
        [
          { "name":"A", "status":"Active" },
          { "name":"B", "status":"Active" },
          { "name":"C", "status":"Active" },
          { "name":"D", "status":"Active" }
        ],
        "name":"Internet Banking",
        "logoUrl":"xxx"
      },
      {
        "paymentModel":"Retail Banking",
        "paymentChannels":
        [
          {
            "bankFeeRate":"0",
            "ccIsRequired":true,
            "name":"R",
            "currency":
            [{
              "isoCode":"xxx",
              "name":"xxx"
            }],
            "bankFeeType":"xxx",
            "paymentChannelId":"9",
            "status":"Active",
            "acceptedCard":
            [
              "visa",
              "mastercard"
            ]
          },
          {
            "bankFeeRate":"0",
            "ccIsRequired":true,
            "name":"M",
            "currency":
            [{
              "isoCode":"xxx",
              "name":"xxx"
            }],
            "bankFeeType":"fixed",
            "paymentChannelId":"13",
            "status":"Active",
            "acceptedCard": [ "amex" ]
          }
        ],
        "name":"Credit Card",
        "logoUrl":"xxx"
      }
    ],
    "metadata": { "count":2 }
  },
  "status":
  {
    "code":"200",
    "message":"OK"
  }
}

component.ts

getPaymentChannel() {
  this.paymentService.getData(data)
  .pipe( map(
      res => res.filter(items => items.data.items ==='Internet Banking')
      .subscribe(res => console.log(res))
  ))
}

Я хочу отобразить 'PaymentChannels[]' в html, используя * ngFor, поэтому я думаю, что мне нужно отфильтровать этот ответ по имени, которые credit card или internet banking, это моя ссылка на стек * demo Я новичок в rxjs и машинописи, кто-нибудь может мне помочь?

Answer 1

Если вы знаете, что ищете только один элемент, вы можете использовать find, который возвращает вам объект.Но давайте использовать filter здесь, поскольку это то, что вы хотите использовать.

Очевидно, вы хотите фильтровать по name внутри items, поэтому ваш фильтр должен выглядеть следующим образом:

 map((res: PaymentModel) => 
   res.data.items.filter((x: Item) => x.name === 'Internet Banking')

Если найден, он вернет вам массив со всеми совпадающими.Итак, теперь вы хотите показать paymentChannels в html, итерировать массив и добавить вложенный ngFor для итерации paymentChannels:

<div *ngFor="let dat of myData">
  <div *ngFor="let p of dat.paymentChannels">
    <!-- ... -->
  </div>
</div>

Ваш разветвленный STACKBLITZ

То же самое с использованием find: STACKBLITZ