angularhttp get中如何传参过滤本地json数据？

Question

我正在设置参数以获取数据，但参数不起作用我正在获取整个值作为数组。如何在获取时过滤数据。这是我如何为我的 service.ts 文件

设置参数

   getinfojson(): Observable<IProduct[]> {

     let params = new HttpParams().set('projectname', "Sasi");

  this._http.get(this._producturl,{params : params}).subscribe( (res:Response)=>{
this.data = <IProduct[]> res.json();
console.log(this.data);
    })

我正在从 json 获取所有值作为产品数组，如下面的截图

但我需要根据项目经理姓名获取详细信息。我怎样才能做到这一点。

AND 我的产品 json 文件

{
    "product": [
        {
        "projectname":"Sasi",
        "Managername":"Shiva"
        },
        {
            "projectname":"Sasikala",
            "Managername":"Dhivya"
            },
            {
                "projectname":"SasiDhivya",
                "Managername":"Visu"
                }
    ]
}

供您参考，下面是我导入的服务 ts

import { Injectable } from '@angular/core';
  import { IProduct } from './product';
  import { Http , Response, RequestOptions} from '@angular/http';
import {HttpClientModule, HttpParams, HttpHeaders} from '@angular/common/http';
import {Observable,of, from } from 'rxjs';
import { HttpModule } from '@angular/http';



@Injectable({
  providedIn: 'root'

})
export class ApiserviceService {
  data:any;
  ifb:any;
  private _producturl='../../assets/product.json';
   constructor(private _http: Http){}

   getinfojson(): Observable<IProduct[]> {

     let params = new HttpParams().set('projectname', "Sasi");

  this._http.get(this._producturl,{params : params}).subscribe( (res:Response)=>{
this.data = <IProduct[]> res.json();
console.log(this.data);
    })
    return this.data;

     }

Answer 1

HttpParams class 帮助将请求参数添加到 REST API 不会过滤响应，您可以使用管道和映射来过滤数据例如：

 this._http.get(this._producturl,{params : params}).pipe(map((response) => {
    response = response.filter((data) => data.projectname === "Sasi" );
    return response;
})).subscribe( (res:Response)=>{
    this.data = <IProduct[]> res.json();
    console.log(this.data);
})

Answer 2

假设您希望 projectname 作为输入，IProduct 作为输出，这就是您需要做的。

  this._http.get(this._producturl,{params : params})
    .pipe( 
       map( res => res.json() ),
       filter( res => res.product !== null ),
       map( res => {
          const matchingProduct = res.product.find( product => product. projectname === "Sasi");
          return matchingProduct;
       })
    )
    .subscribe( (matchingProduct)=>{
        this.data = matchingProduct;
        console.log(this.data);
    });

我也不认为你在从流中取出数据时使用了 rxjs，只需将整个流保存在 ApiserviceService class

this.data$ = this._http.get(this._producturl,{params : params})
  .pipe( 
    map( res => res.json() ),
    filter( res => res.product !== null ),
    map( res => {
     const matchingProduct = res.product.find( product => product. projectname === "Sasi");
     return matchingProduct;
    })
  );

如果您需要渲染 data$ 只需使用 async 管道。如果您以不同的方式需要它，请从中做出承诺并等待它。

async methodThatNeedsProduct() {
   const product = await this.data$.pipe(take(1)).toPromise()
   // product is not available here
}

angularhttp get中如何传参过滤本地json数据？

How to pass the parameter to filter the local json data in angular http get?

json

http-get

typescript

angular

angular7