Angular 6 router.navigate() queryParams parser

Question

I'm facing an issue while developing an application using Angular 6. While passing an object as a value of a property of queryParams: { prop: value}, built in function converts object to a string, and I get an usual in js [object Object].

What I'm trying to do: I have a query string that i use to send request to my server. I want to use it now, to update query params of current route. Example of my query string stringified with npm-qs lib:

?priceRange[min]=1&priceRange[max] = 2

Let's take a look at my object that I parse with the same lib, back to an object:

priceRange: {min: "1", max: "2"}

What queryParams converts it to:

priceRange=%5Bobject%20Object%5D

To do so, I parse it back to a proper object, and then, I use a method posted somewhere here:

constructor(
  private readonly router: Router,
  private readonly activatedRoute: ActivatedRoute,
) {}

updateQueryParams() {
  this.router.navigate([], {
    relativeTo: this.activatedRoute,
    queryParams: {
      priceRange: {min: "1", max: "2"} (hardcoded this to simplify example)
    }
 });
}

With the code above I'm trying to:

Stay at the same page ([] along with relativeTo: this.activatedRoute, makes me to stay at the same page as far as I understand);
Change url to .com/?priceRange[min]=1&priceRange[max]=2 (or something like that)

I'm asking, is there a way to use objects as a values in queryParams, or are there any suggestions? I've read through angular.io docs, there is nothing about such case, just simple examples of param1=q & param2=w, same actually in several stack posts. Maybe I can somehow pass a query string to my url using Angular means? (Not using those queryParams of router.navigate() method).

Thanks in advance!

kontur · Accepted Answer · 2020-09-29 13:47:27Z

1

I was also getting this %5Bobject%20Object%5D but then I understood the reason. This is because query params need to be passed as a second argument.

As shown below:

this.router.navigate(["/enter-url"], { 
  queryParams: { 
    priceRange: {
      min: "1",
      max: "2"
    }
  } 
});

edited Sep 29, 2020 at 13:47

kontur

5,2732 gold badges41 silver badges69 bronze badges

answered Sep 29, 2020 at 12:45

Shivraj Singh Deopa

114 bronze badges

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

Collectives™ on Stack Overflow

Angular 6 router.navigate() queryParams parser

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related