根据角度8中的特定条件过滤来自httpClient的响应数据

Question

Hi I am new to Angular(V8). I am making a post request and would like to filter the response data based on a condition. When I tried, I got the following error, filter is not a function. Could you please guide so that it would be helpful for me.

Sample Response = {
className:"a",
dept_name:"b",
jsonData:[
{
"type":"branch",
"value":"1"
},
{
"type":"branch",
"value":"1"
},
{
"type":"dev",
"value":"2"
},
{
"type":"dev",
"value":"2"
},
{
"type":"dev",
"value":"2"
},
{
"type":"branch",
"value":"1"
}
]

} 

I want to filter the jsonData where type="dev".

this.http.post('someurl')
  .map(item => this.filterVal = item)
  .filter(item => item.type=== "dev") 
  .subscribe(data => {
    this.posts = data;
  })

Expected Output :
jsonData:[
{
"type":"dev",
"value":"2"
},
{
"type":"dev",
"value":"2"
},
{
"type":"dev",
"value":"2"
}
]

Answer 1

Response.jsonData.filter(x => {x.type === "dev"})

Answer 2

You are using version 8, so if started with CLI, rxjs 6 is automatically included. You should move on to that, meaning pipeable operators. Also we usually allocate http-requests to be made in a service and the components just subscribe to the result, that is what I have done in the StackBlitz below. Here I will use your code though, but refer to the StackBlitz please.

Change your code to:

import { map } from 'rxjs/operators';

// ...

this.http.post('someurl')
  .pipe(
    map(val => this.filterVal = val),
    // use filter to get the values you want
    map(items => items.jsonData.filter(item => item.type === 'dev'))
  )

If you insist to do it with older rxjs, it looks very similar:

this.http.post('someurl')
  .map(val => this.filterVal = val)
  .map(items => items.jsonData.filter(item => item.type === 'dev'))

But please embrace the newer version.

Finally a STACKBLITZ