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

Question

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" }

show your serverside method also ...if it working fine then do change as given in answer — Pranay Rana
– Pranay Rana, Commented May 9, 2018 at 7:08

Pardeep Jain · Accepted Answer · 2018-05-16 11:16:42Z

1

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

By appending it to URL like this -

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

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

https://www.concretepage.com/angular-2/angular-httpclient-get-example#parameters

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.

edited May 16, 2018 at 11:16

answered May 9, 2018 at 6:53

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

1 Comment

Pardeep Jain Over a year ago

What's wrong with this answer may i KNow? why Downvote?

Pranay Rana · Accepted Answer · 2018-05-09 07:05:37Z

1

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 })

edited May 9, 2018 at 7:05

answered May 9, 2018 at 6:55

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

10 Comments

Pardeep Jain Over a year ago

where does this params will add at the time of httpCall ?

Pranay Rana Over a year ago

@PardeepJain - not getting you

Pardeep Jain Over a year ago

I mean to say is your method is different from my? or after exceution it will append with URL?

Pranay Rana Over a year ago

@PardeepJain - it will append parameter to url, so no need to do manually as you did

Pardeep Jain Over a year ago

so Basically OUR answers are same, with different method :)

|

Abhishek · Accepted Answer · 2018-05-09 06:54:48Z

0

you can pass parameters like this:

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

answered May 9, 2018 at 6:54

Abhishek

1,0043 gold badges15 silver badges26 bronze badges

Comments

Yhan · Accepted Answer · 2018-05-09 06:58:52Z

0

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) }

answered May 9, 2018 at 6:58

Yhan

765 bronze badges

Comments

Hasan Fathi · Accepted Answer · 2018-05-09 07:09:25Z

0

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) => {
        });

answered May 9, 2018 at 7:09

Hasan Fathi

6,1764 gold badges49 silver badges67 bronze badges

2 Comments

Hasan Fathi Over a year ago

@rina what is the problem ? why un accept my answer?

rina Over a year ago

parameters are passing but showing all table data, it's not appending with the url

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

10 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

10 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related