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.

Highmuckamuck

just try console.log(data.mockup_id) ? – Bacteriostat

@trichetriche, It gives value as undefined, Already tried.. – Highmuckamuck

Then please provide a minimal reproducible example reproducing the issue. – Bacteriostat

(you can use stackblitz.io) – Bacteriostat

add the generated url in your question – Thomism

@JohnVelasquez, The url is localhost:80000/#/page-mockup?data=%5Bobject%20Object%5D – Highmuckamuck

@trichetriche, THe stackblitz link was, stackblitz.com/edit/… – Highmuckamuck

@ManiRaj it doesn't reproduces your issue ... – Bacteriostat

@trichetriche, Unable to make routing in it.. As i am new in stackblitz kindly help me.. I just made all the code inside it but routing not working.. The routing from app to mockup not working in it. – Highmuckamuck

@ManiRaj stackblitz is just Visual studio code online. Implement the routing like you would do in your own application, which is importer the router module, declaring routes, and using router outlets. – Bacteriostat

@trichetriche, Like that only i have made.. You can see in my example, if any corrections kindly help me.. I have used routes in app.module.ts.. – Highmuckamuck

Please change quetion title. this is not particular with typescript, it shouldbe Angular question – Epigene

Answer 1

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 });

Thomism

Answer 2

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

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

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

3. Display the correct variables.

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

Stackblitz

Bacteriostat

Answer 3

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
 });

:-)

Figurant