Angular 2 http get querystring params

Question

Hopefully someone can help with this. I building an ionic 2 app which is based on the newer Angular 2, I am familiar with previous versions of Angular, but still trying to figure this whole typescript.

I have my API setup with basic get querystrings (e.g domain.com?state=ca&city=somename)

export class TestPage {
public state: string ='ca';
public city: string = null;
constructor(private http: Http){}

public submit() { 
   let url = "http://localhost/api"; 
   let payload = {"state": this.state, "city": this.city};
   this.$http.get(url, payload).subscribe(result => {
      //result
   }, err => {  
      //do something with the error 
   }
  )
 }
}

When I execute this it pulls my API url fine and I can get a response back, however none of the querystrings are being sent in the request. Its just sending http://localhost/api. If I console.log the payload its fine.

Ultimately I am trying to get it to do https://localhost/api?state=ca&city=example

Looking at examples I can't really find anything straight-forward on this.

Is it not possible to take a payload on http with this newer version of Angular? The code above is just an example. I have many querystrings, which is why I was hoping to send a payload to it.

Any help or suggestion would be appreciated.

Angular 4 is meant to be angular 2.4 I think. Googling it yield result that explain that. Angular.js is v1 and Angular 2 is v2 there isn't any v3 or v4 but some people, for some reason, call 2.3 and 2.4 Angular 3 and 4. — GillesC
– GillesC, Commented Mar 27, 2017 at 9:33
@GillesC no. The version is 4.0.0. Not 2.4.0. Angular now uses semantic versioning, and the 4.0 is an evolution of the 2.x version. — JB Nizet
– JB Nizet, Commented Mar 27, 2017 at 9:34
@GillesC Angular 4.0.0 changelog and angular 2.4.8 changelog — Suraj Rao
– Suraj Rao, Commented Mar 27, 2017 at 9:37
@limit: read the API documentation: angular.io/docs/ts/latest/api/http/index/Http-class.html. It should be this.http.get(url, { params: payload }) — JB Nizet
– JB Nizet, Commented Mar 27, 2017 at 9:38

Shivam · Accepted Answer · 2017-03-27 10:12:17Z

1

The Http.get method takes an object that implements RequestOptionsArgs as a second parameter.

The search field of that object can be used to set a string or a URLSearchParams object.

An example:

// Parameters obj-
 let params: URLSearchParams = new URLSearchParams();
 params.set('state', this.state);
 params.set('city', this.city);

 //Http request-
 return this.http.get('http://localhost/api', {
   search: params
 }).subscribe(
   (response) => this.onGetForecastResult(response.json()), 
   (error) => this.onGetForecastError(error.json()), 
   () => this.onGetForecastComplete()
 );

Documentation: here

edited Mar 27, 2017 at 10:12

answered Mar 27, 2017 at 10:07

Shivam

3,1414 gold badges32 silver badges46 bronze badges

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

2 Comments

limit Over a year ago

Thanks for the explanation. This worked. I wonder if it get be looped off a single payload, so I don't have to set every param.

Shivam Over a year ago

You can apply extra logic for that. Cheers!

Collectives™ on Stack Overflow

Angular 2 http get querystring params

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related