I am trying to send a post request and want to filter the object response to extract specific data based on certain conditions. In my object response, I specifically need to find the object array for internet banking. After doing some research on Google, this is what I attempted:
response object:
{
"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))
))
}
I would like to use *ngFor in HTML to display 'PaymentChannels[]', so I believe I need to filter this response by name, specifically credit card or internet banking. Here is the link to my StackBlitz demonstration demo. As I am new to rxjs and typescript, any guidance from experts would be highly appreciated.