How to get object in queryparams using Typescript?

Question

In a button click i have function as,

  inviewMockupEvent(data) {
    console.log(data);
    this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });
  }
console.log(data) give the result as {mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432", …}

In navigated component i am getting the data as follows,

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      let data = params['data'];
      console.log(data);
      console.log(JSON.stringify(data));
    });

Where,

console.log(data) gives output as [object Object]
console.log(JSON.stringify(data)) gives output as "[object Object]"

And also,

console.log(data.mockup_id) gives result undefined

Here i need to retrieve the object values, but unable to get it. Kindly help me to retrieve the data through query params and fetch using typescript ngOnit without using html.

@trichetriche, It gives value as undefined, Already tried.. — Maniraj Murugan
– Maniraj Murugan, Commented Sep 10, 2018 at 7:13
Then please provide a minimal reproducible example reproducing the issue. — user4676340
– user4676340, Commented Sep 10, 2018 at 7:14

muttonUp · Accepted Answer · 2020-01-19 12:48:11Z

7

Base on your url localhost:80000/#/page-mockup?data=%5Bobject%20Object%5D, reason because angular picks only the data key and and converted the value into a string (I guess this is only for object values), which is why you get [object Object]

console.log({mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432"}.toString());

So convert this

this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });

to this

this.router.navigate(['/page-mockup'], { queryParams: data,  skipLocationChange: true });

edited Jan 19, 2020 at 12:48

muttonUp

6,7872 gold badges44 silver badges57 bronze badges

answered Sep 10, 2018 at 7:54

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

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

Comments

user4676340 · Accepted Answer · 2018-09-10 07:58:52Z

7

You're adding an useless layer to your object. Spread it.

this.router.navigate(['/page-mockup'], { queryParams: { ...data },  skipLocationChange: true });

If you want to use the array notation, then use the array variable, not the map variable.

Display the correct variables.

this.activatedRoute.queryParams.subscribe(params => {
  let data = params;
  console.log(data.mockup_id);
});

Stackblitz

answered Sep 10, 2018 at 7:58

user4676340

Comments

Carlos Noé · Accepted Answer · 2021-12-30 12:41:51Z

0

edit(pedido : Pedido, sku:string){
this.router.navigate(['/orders/d/nuevo/editarLinea',this.id, sku, this.llamada],
  {queryParams: {pedido: JSON.stringify(pedido)}}).then(r => 1 ==1);}

and read the object:

 this.ruta.queryParams.subscribe(params => {
  this.pedidos = JSON.parse(params['pedido']) as Pedido
 });

:-)

edited Dec 30, 2021 at 12:41

answered Dec 22, 2021 at 16:44

Carlos Noé

3911 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to get object in queryparams using Typescript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related