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

【问题标题】：Filter response data from httpClient based on a certain condition in angular 8根据角度8中的特定条件过滤来自httpClient的响应数据
【发布时间】：2020-01-19 02:55:40
【问题描述】：

您好，我是 Angular(V8) 的新手。我正在发出发布请求，并希望根据条件过滤响应数据。当我尝试时，出现以下错误，过滤器不是函数。能否请您指导，以便对我有所帮助。

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"
}
]

}

我想过滤 type="dev" 的 jsonData。

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"
}
]

【问题讨论】：

标签： javascript angular typescript filter angular8

【解决方案1】：

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

【讨论】：

当我尝试上述方法时，它会抛出错误 res.jsonData.filter is not a function。

【解决方案2】：

您使用的是版本 8，因此如果使用 CLI 启动，会自动包含 rxjs 6。您应该继续前进，这意味着可管道化的运算符。此外，我们通常会在服务中分配 http-requests，组件只需订阅结果，这就是我在下面的 StackBlitz 中所做的。这里我将使用你的代码，但请参考 StackBlitz。

将您的代码更改为：

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'))
  )

如果你坚持用旧的 rxjs 做，看起来很相似：

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

但请接受更新的版本。

Finally a STACKBLITZ

【讨论】：