typescript - Filtrar objeto de respuesta en Angular

Estoy realizando una solicitud POST y me gustaría filtrar la respuesta del objeto para obtener algunos datos según una condición, así que en mi respuesta del objeto, necesito filtrar y encontrar un arreglo de objetos para banca por Internet, según lo que encontré en Google, esto es lo que intenté:

objeto de respuesta:

{
  "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))
  ))
}

Quiero mostrar 'PaymentChannels[]' en HTML usando *ngFor, así que creo que necesito filtrar esta respuesta por nombre, que son tarjeta de crédito o banca por internet, este es mi enlace de demostración de Stackblitz, soy nuevo en rxjs y typescript, ¿alguien podría guiarme?

Respuesta #1

Si sabes que solo estás buscando un elemento, puedes usar find, que te devuelve un objeto. Pero vamos a usar filter aquí, ya que eso es lo que quieres usar.

Aparentemente quieres filtrar por el name dentro de items, por lo tanto tu filtro debería verse así:

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

Si se encuentra, te devolverá un arreglo con todo lo que coincida. Así que ahora quieres mostrar los paymentChannels en el html, iterar el arreglo y agregar un ngFor anidado para iterar paymentChannels:

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

Tu STACKBLITZ bifurcada

Lo mismo usando find: STACKBLITZ