Query Parameter Not Showing the Correct Parameters

When I add items to the query parameters, it shows an object in the URL. How can I get it to show the items?

This is the HTML:

<form [formGroup]="submitForm" (ngSubmit)="checkOut(items)">
<input type="submit" value="Check Out">

This is the component:

public checkOut(items: any)  {
this.router.navigate(['check-out'], { queryParams: { items: this.items } });

This is what the URL looks like:


At another forum I learned that I just need to convert it to json like this: this.router.navigate(['check-out'], { queryParams: { items: JSON.stringify(this.items) } });

Pass the string value from the object for each item. Probably this is what you want.

Where is this challenge coming from? Please share the link and maybe we can help.

If it is a personal project, add the particular functionality to an codepen project or something similar.

To be fair I am not able to recognise this syntax. [formGroup]="submitForm" (ngSubmit)="checkOut(items)"> . Which framework is this?

Edit: Ok seems to be Angular/Typescript.
We definitely need the whole form to be able to understand the problem. The info provided are incomplete.