HttpParams dont request filtered JSON

Question

I have a really simple http request.

My Front end:

<button mat-button (click)="onSubmit()">Login</button>

My onSubmit():

onSubmit() {

this.personService.getPersonByName().subscribe(person => {
  console.log('Person', person);
});

My PersonService getPersonByName():

  private personURL = 'http://localhost:3000/api/persons'

  constructor(private http: HttpClient) { }


  getPersonByName(): Observable<Person> {

     let params = new HttpParams().set('username', 'SwaX');

     return this.http.get<Person>(this.personURL, { params });
 }

What i get:

Why do i get 3 Objects instead of 1?

The request is working. The Filtering through the "param" HttpParam object doesn't work. — SwaX, Sep 11 '19 at 17:28
you have tested request with another app like Postman? It works? — Leonardo Getulio, Sep 11 '19 at 17:33
I am going to try it with Postman. Loopback tells me "Server response 200" and i get the person Objects. — SwaX, Sep 11 '19 at 17:42

Steve Whitmore · Answer 1 · 2019-09-11T18:23:37.243

0

This is a problem with your API, not Angular. You're not filtering down your response before sending it back over the wire. You could fix it on the API side and have it return a single object instead of an array of objects or you could filter the object out of the response in your service's getPersonByName() method using map -

getPersonByName(username: string): Observable<Person> {
    return this.http.get<Person[]>(this.personURL)
        .pipe(
           .map(people => people.find(person => person.username === username)
        );
}

edited Sep 11 '19 at 18:23

answered Sep 11 '19 at 17:30

Steve Whitmore

903
1
9
22

When i try to use find() i get "Property 'find' does not exist on type 'Person'." What should i do? – SwaX Sep 11 '19 at 17:40
I was missing a .pipe() in there. Give it a try with the map method wrapped in pipe as shown in the edited snippet above. – Steve Whitmore Sep 11 '19 at 18:24
Honestly though I would go with what others are saying and get your API to return the specific object instead of filtering it out from a list. It's cleaner to get exactly what you need from the API instead of sifting through a bunch of data on the frontend. – Steve Whitmore Sep 11 '19 at 18:24

Adrita Sharma · Answer 2 · 2019-09-11T18:11:21.010

0

Try:

return this.http.get<Person>(`${this.personURL}?username=SwaX`);

or,

return this.http.get<Person>(`${this.personURL}/1`);

based on your backend param

edited Sep 11 '19 at 18:11

answered Sep 11 '19 at 17:52

Adrita Sharma

21,581
10
69
79

i still get 3 objects – SwaX Sep 11 '19 at 17:57
i try to filter this URL : http://localhost:3000/api/persons/ to only 1 object. Is that the wrong way of thinking? Because i just saw that loopback prepared this URL for me : GET /persons/{id} And i tried it like that :http://localhost:3000/api/persons/1 That works. So do i have to change something in the API ? – SwaX Sep 11 '19 at 18:10
Try `this.http.get(`${this.personURL}/1`);` – Adrita Sharma Sep 11 '19 at 18:11
i tried this `return this.http.get(this.personURL + '/1');` And i only got 1. But it is filtered by the id not the name. – SwaX Sep 11 '19 at 18:17
For that, your backend should have an endpoint that accepts username> Do your backend have it? – Adrita Sharma Sep 11 '19 at 18:19
1

ok i get it i try to get into endpoints and learn more about that thank you. Now i know what to do. Because i have no knowledge what so ever about endpoints. Thank you! – SwaX Sep 11 '19 at 18:22

score 0 · Answer 3 · answered Sep 11 '19 at 19:02

Maybe you're missing something small, and it's that the HttpParams in the request would be mapped to join the URL. Then doing

getPersonByName(): Observable<Person> {
   let params = new HttpParams().set('username', 'SwaX');
   return this.http.get<Person>(this.personURL, { params });
}

is similar to doing

getPersonByName(): Observable<Person> {
   return this.http.get<Person>(this.personURL + '?username=Swax');
}

Which should produce the same results. As it's a GETrequest, so you can also test it using your browser. Simply open

http://localhost:3000/api/persons?username=Swax

in your browser and see what comes. This way you'll be able to determine if the problem comes from your API or not.

HttpParams dont request filtered JSON

3 Answers3