Angular 2 http.get() url with dynamic value as params?

Question

How to pass url arguments (query string) to a HTTP request as

let params: URLSearchParams = new URLSearchParams();

params.set('pageId', 0);
params.set('activeFilter', 1);

let requestOptions = new RequestOptions();
requestOptions.search = params;

return this._http.get("http://testsite.com/cats/page/", requestOptions ).map(res => res.json());

where in my requestOptions reference i want to pass like :pageId/:activeFilter .

finally i need to build an url to call my rest api server using this url ( http://testsite.com/cats/page/:pageId/:activeFilter ) //pageId=0,activeFilter=1

i have to bind only the value not the whole string?

i tried a lot. but it is not coming as i expected, this is what i am getting /cats/page/?pageId=0&activeFilter=1 in my server console.

any suggestions please? unable to find where i am going wrong

/cats/page/?pageId=0&activeFilter=1 seems correct. What else should it be? — Aluan Haddad
– Aluan Haddad, Commented May 19, 2017 at 10:24
You mean http://testsite.com/cats/page/0/1 ? If so then just construct the URL. With string template if necessary. — Neil Lunn
– Neil Lunn, Commented May 19, 2017 at 10:26
the last two values will change page to page dynamically. in my server side routes i am using the same url to get all categories from server. if suppose when i click load more button pageId value will change to 1 and so on.. — Sukumar MS
– Sukumar MS, Commented May 19, 2017 at 10:31

Suneet Bansal · Accepted Answer · 2017-05-19 10:34:35Z

2

ECMA6 has provided one very interesting feature "String Interpolation" where string can have placeholders which we replaced as per the requirement.

Ex:

let first = 'Jane';
let last = 'Doe';
console.log(`Hello ${first} ${last}!`);

In your case, It would be:

let param1 = 'someval1';
let param2 = 'someval2'
this._http.get(`http://testsite.com/cats/page/${param1}/${param2}`, requestOptions ).map(res => res.json());

answered May 19, 2017 at 10:34

Suneet Bansal

2,7061 gold badge16 silver badges18 bronze badges

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

Comments

mikias · Accepted Answer · 2017-05-19 10:41:08Z

If you want to pass those values into the url you should put them directly into the url string like this:

@Injectable()
export class ExampleService {

  constructor(
    private http: Http
  ) { }

  getPage(pageId: number, activeFilter: number) {
    return this.http.get(`http://testsite.com/cats/page/${pageId}/${activeFilter}`)
                    .map(res => res.json())
  }

}

Note that you're using `` to allow for string interpolation.

You would call this service method dynamically from a component by passing in the pageId and activeFilter like so:

import { Component, OnInit } from '@angular/core'; import { ExampleService } from './example.service';

@Component({
  selector: 'example',
})

export class ExampleComponent implements OnInit {
  constructor(
    private exampleService: ExampleService
  ) { }
  currentPageId = 0;
  activeFilter = 1;

  ngOnInit() { }

  getPage() {
    this.exampleService.getPage(this.currentPageId, this.activeFilter)
  }
}

Hope that clarifies things. Good luck!

Collectives™ on Stack Overflow

Angular 2 http.get() url with dynamic value as params?

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