CODEWITHSUNDEEP
jsonangulartypescriptangular7http-get
Sasi Dhivya
Sasi Dhivya

Reputation: 501

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

I am setting parameter to get data,but params not working i am getting entire values as arrays. how to filter the data while getting. Here is how i am setting parameter to my service.ts file 

   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);
    })

i am getting all values from json as products array like below screebshot

enter image description here

but i need to get the details based on projectmanger name. How can i achieve this.

AND My product json file 

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

For ur reference below is my imports of service 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;

     }

Upvotes: 0

Views: 6036

Answers (2)

Angular Dev
Angular Dev

Reputation: 4916

Assuming you want projectname to be the input and a IProduct to be the output here is what you need to do.

  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);
    });

I also don't think you are using rxjs right when you take data out of streams, just save the entire stream on the 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;
    })
  );

If you need to render data$ just use the async pipe. If you need it in a different method, make a promise out of it and await it.

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

Upvotes: 1

anees
anees

Reputation: 344

HttpParams class help to add request parameters to the REST API in wont filter the response instead u can use pipe and map to filter the data ex:

 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);
})

Upvotes: 1

Related Questions