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

Question

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

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;

     }

@Arif He is using mock data, which makes it a bit confusing. — Angular Dev
– Angular Dev, Commented Feb 28, 2019 at 8:48
i am not using any server just i want to read and write to my local json data — Sasi Dhivya
– Sasi Dhivya, Commented Feb 28, 2019 at 8:49
If you are fetching the data from local json file, then you have to manually filter once http.get() returns all the records. Alternatively you can have a look at this npmjs.com/package/angular-in-memory-web-api which facilitates the CRUD operations — Amit Chigadani
– Amit Chigadani, Commented Feb 28, 2019 at 8:52
It is not related to angular. It basically creates a rest api for your json file — Arif
– Arif, Commented Feb 28, 2019 at 9:00

anees · Accepted Answer · 2019-02-28 09:07:52Z

1

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

answered Feb 28, 2019 at 9:07

anees

3441 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sasi Dhivya Over a year ago

but map is not defined for me

anees Over a year ago

import { map } from "rxjs/operators"; import it from rxjs

Angular Dev · Accepted Answer · 2019-02-28 09:14:42Z

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
}

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related