CODEWITHSUNDEEP
angularhttprequest
rina
rina

Reputation: 127

how to pass url parameters in a http request in angular 4

How to make get request by passing parameters? I tried this but getting 404 error

getOrderbyOrderNo() {

        this.orderno = this.cookie_service.get('key');

        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('orderno', this.orderno );
        let params = new URLSearchParams();
        params.append("someParamKey", this.orderno )

        return this.http.get('http://localhost:8080/View/orders', { headers: headers, params: params })


    }

output

ERROR 
Object { _body: "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot GET /View/orders</pre>\n</body>\n</html>\n", status: 404, ok: false, statusText: "Not Found", headers: {…}, type: 2, url: "http://localhost:8080/View/orders" }

Upvotes: 2

Views: 10120

Answers (5)

Pardeep Jain
Pardeep Jain

Reputation: 86730

IMO there are two ways by which you can send params with http request.

  1. By appending it to URL like this -

    return this.http.get('http://localhost:8080/View/orders/'+this.orderno, { headers: headers  })

  2. Another way is, If you are using httpclient then you can send params in the options like this-

     let httpParams = new HttpParams()
    .set('orderno', this.orderno);

For more about this read out here

In get type of request there is no body part of request so you have to append your params in your URL i.e params or query params. or using second way in options.

Upvotes: 1

Hasan Fathi
Hasan Fathi

Reputation: 6086

Try this:

import this packages to your class:

import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';

inject HttpClient like this:

constructor(private _http: HttpClient) {}

send request:

    let url = "your url";

    let Params = new HttpParams();
    Params = Params.append('param1', value1);
    Params = Params.append('param2', value2);

    let header: HttpHeaders = new HttpHeaders();
    header = header.append('Content-Type', 'text/plain');

    return this._http.get(url , { params: Params, headers: header })
        .map((response: Response) => {
        });

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176896

if you are using httpclient then you should do this 

let params = new HttpParams();
params = Params.append('firstParameter', parameters.valueOne);
params = Params.append('secondParameter', parameters.valueTwo);
return this._HttpClient.get(`${API_URL}/api/logs`, { params: params })

or you can create object of params

export interface GetParams {
  firstParameter?: string;
  secondParameter?: string;
   ..more param you want 
} 


Const getParamsobj : GetParams = {
  firstParameter: 'value',
  secondParameter: 'value'
  ..other params
}
return this._HttpClient.get(`${API_URL}/api/logs`, { params: getParamsobj })

Upvotes: 1

Yhan
Yhan

Reputation: 76

Passing parameters and headers is different in HttpClient since they're immutable, If you want to pass the parameter you should use HttpParams. { params: new HttpParams().set('name', term) }

Upvotes: 0

Abhishek
Abhishek

Reputation: 1006

you can pass parameters like this:

return this.http.get('http://localhost:8080/View/orders?someParamKey=xyz&anotherParam=abc
', { headers: headers})

Upvotes: 0

Related Questions