how to pass dynamic query URL to server - angular

Question

Here is the http-service -

  public getProducts(
    gender?: ProductGender,
    category?: ProductCategory,
  ): Observable<IGetProductsResponse> {
    const baseUrl = ENDPOINT;

      return this.http.get<IGetProductsResponse>(
        `${baseUrl}list?gender=${gender}&category=${category}`
      );
  }

If I'm sending the request like this, i get 0 as the value I'm not filling. for example -

http://localhost:4200/product-list?gender=1

I'll get the category value as 0.

How can i use the URL in a way that able to get only gender or category?.

Tried to change the URL to - ${baseUrl}list?gender=${gender} and that is working but it is not dynamic.

OctavianM · Accepted Answer · 2021-08-15 21:42:23Z

1

I would use HttpParams instead, to build the parameter list however you need, rather than passing them manually like in your code. You can try this and see how it works:

  public getProducts(
    gender?: ProductGender,
    category?: ProductCategory
  ): Observable<IGetProductsResponse> {
    const baseUrl = ENDPOINT;
    const params = new HttpParams();

    if (gender) {
      params.append('gender', gender);
    }

    if (category) {
      params.append('category', category);
    }

    return this.http.get<IGetProductsResponse>(`${baseUrl}list`, { params });
  }

edited Aug 15, 2021 at 21:42

answered Aug 15, 2021 at 16:02

OctavianM

4,6171 gold badge18 silver badges31 bronze badges

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

Comments

Joshua McCarthy · Accepted Answer · 2021-08-15 15:59:36Z

0

You could declare a ternary parameter variable and inject that into your URL string.

const param = !!gender ? `gender=${gender}` : `category=${category}`;

return this.http.get<IGetProductsResponse>(`${baseUrl}list?${param}`);

Since 0 is falsy, you can just use double bangs to evaluate gender.

answered Aug 15, 2021 at 15:59

Joshua McCarthy

1,8771 gold badge10 silver badges6 bronze badges

Collectives™ on Stack Overflow

how to pass dynamic query URL to server - angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related