0

I have a Spring controller which takes one argument - Pageable:

 @RequestMapping(value = "/all", method = RequestMethod.GET)
    public Page<Item> getAll(Pageable pageable) {    
        return itemService.findAll(pageable);
    }

Via Postman I can call this api by providing query params as: http://localhost:8080/api/item/all?page=0&size=2 and I got a json response with two elements.

How can I call this kind of api in Angular 4? Is there any other way to send query params in Angular 4 than this?:

getItems(page, size){
    return this.http.get(this.url + '/all?page=' + page + '&size=' + size);
  }

I would like to use something like:

ngOnInit() {
    let search = new URLSearchParams();
    search.set('page', '0');
    search.set('size', "2");
    console.log('------------', search);
    this.itemService.getItems({search:search})
      .subscribe(res => {
        console.log('teitems', res.json());
        this.items = res.json().content;
      });
  }

But generally it doesn't work at all and the search object looks suspicious because of the fact: enter image description here

What is more in network tab of my browser request looks like:

enter image description here

So as you see the request URL differ from that which I posted above from Postman.

bielas
  • 672
  • 2
  • 12
  • 29
  • getItems() expects two arguments, page and size, which are supposed to be numbers. You call it with a single argument, which is an object (`getItems({search:search})`). How could that work? – JB Nizet Sep 26 '17 at 16:53
  • I also checked it and doesn't work – bielas Sep 26 '17 at 16:58

1 Answers1

0

Your question is a lot like the one found here. Look at the answers there.

In summary:

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

params = params.append('var1', val1);

this.http.get('base_url', {params: params});

You could also manually build your param object (not use HttpParams).

this.http.get('base_url', {params: {'var1': val1}});
mgm87
  • 851
  • 1
  • 7
  • 12
  • In this solution my `request url` still looks like `http://localhost:4200/api/item/all` without those parameters so the `rest controller` can't read it properly. – bielas Sep 26 '17 at 16:59