HTTP Query Parameters

Question

If I have an array of the object where I'm storing all the search filters selected by a user and here is its structure:

export const filterDataObject = [{
    date: '',
    tid: '',
    className: '',
    userName: '',
    category: [],
    limit: '50',
    sort: 'acs'
}];

the REST call should be for example something like that :

   http://localhost:1234/api/query? 
_filter=tid%3Dcdfg&_limit=50&_sort=asc

while _filter is collecting all params but limit and sort

How can I pass the result array as params to my httpClient rest request especially the category array ?

David · Accepted Answer · 2019-07-10 11:36:29Z

1

I'm assuming here that you only want to send one filter to your API, not the array, and also that you are using angular 4+

Option #1

this.http.get('http://localhost:1234/api/query', {params: filterDataObject[0]})...

Option #2

You can use HttpParams

import {HttpParams} from '@angular/common/http';
//...
let params = new HttpParams();

for(let key of Object.keys(filterDataObject[0])){
    params= params.set(key, filterDataObject[0][key]) ;
}

this.http.get('http://localhost:1234/api/query', {params: params})...

Option #3

You could also try using URLSearchParams (if you do not need IE support).

let sp = new URLSearchParams();

for(let key of Object.keys(filterDataObject[0])){
    sp.set(key, filterDataObject[0][key]) 
}

const url = `http://localhost:1234/api/query?${sp.toString()}`;
this.http.get(url)...

edited Jul 10, 2019 at 11:36

answered Jul 10, 2019 at 10:57

David

34.6k13 gold badges90 silver badges124 bronze badges

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

Comments

Chanaka Weerasinghe · Accepted Answer · 2019-07-10 10:57:20Z

0

Append data to URLSearchParams

const params = new URLSearchParams();
    params.set('sort', val);
    params.set('tid', val);
    params.set('limit', val);
    params.set('sort', val);

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      params: params,
      withCredentials: false
    });

    console.log('Options: ' + JSON.stringify(options));

    return this.http.post(this.BASE_URL, data, options)
      .map(this.handleData)
      .catch(this.handleError);

answered Jul 10, 2019 at 10:57

Chanaka Weerasinghe

5,8002 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

HTTP Query Parameters

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