Angular2 : Retrieving Data with http get request from server using query string

Question

Hi I am trying to get data using http get request and query string.

I want the get http url to be 'baseUrl' + 'querystring' like http://randomUrl.com/?var1=val1&var2=val2

I tried using URLSearchParams like below but somehow, instead of getting 'var1=val1&var2=val2' as querystring, I am getting http://randomUrl.com/?[object%20Object]

Below is my code. What am I doing wrong?

In the global HttpClientService,

get(path: string): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    headers.append('Access-Control-Allow-Headers', 'Content-Type');
    headers.append('Access-Control-Allow-Methods', 'GET');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append("X-Requested-With", "XMLHttpRequest");
    let options = new RequestOptions({ headers: headers });

    return this.http.get(`${baseURL.baseurl}${path}`, options)
        .map(this.extractdata)
        .catch(this.handleError);
}

In the Service, @Injectable() export class GetDataService {

  constructor(private http: HttpClient) { }

  getData(queryparams): Observable<any> {

    return this.http.get('/front/search?' + `${queryparams}`)
 }
}

In the component using above service,

getData(): void {

    let params = new URLSearchParams();
    params.set('var1', 'val1')
    params.set('var2', 'val2')
    params.set('var3', 'val3')

    this.getdata.getData({search:params})
        .subscribe
        (
        data => this.data = data,
        error => this.errorMessage = error
        )
}
ngOnInit(): void {
    this.getData();
}

I appreciate your help in advance

Answer 1

URLSearchParams will actually format the string to the url as you want, meaning, it creates the querystring to the correct format, so something like you want:

var1=val1&var2=val2&var3=val3

so you really do not need to do anything else to it, than pass it in your url. So try the following:

getData(): void {
  let params = new URLSearchParams();
  params.set('var1', 'val1')
  params.set('var2', 'val2')
  params.set('var3', 'val3')

this.getdata.getData(params) // just pass the params as such
    .subscribe(
    data => this.data = data,
    error => this.errorMessage = error
    )
}

and then your service:

get(path: string): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get(baseUrl, path, options) // notice, pass the baseUrl as string and then just pass the queryparams as such
        .map(this.extractdata)
        .catch(this.handleError);
}

The reason to as why you get the [object%20Object] is because of this line:

this.getdata.getData({search:params})

Here you are passing an Object - You create an object with the property search which holds your querystring, which is of course what you do not want, so therefore just pass the querystring you created.

Answer 2

I think the parameter you are passing is a array of object. in that case. Try doing:

let parameter: URLSearchParams = new URLSearchParams();
for(this.i = 0; this.i < param.length; this.i++) {
    parameter.set(param[this.i]['key'], param[this.i]['value']);
}

and

return this.http.get(URL_here, {search: parameter}).map(response => response.json());