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.

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.

• javascript
• angular
• typescript
• angular-routing
• angular4-router

• just try console.log(data.mockup_id) ? – user4676340 Commented Sep 10, 2018 at 7:11
• @trichetriche, It gives value as undefined, Already tried.. – Maniraj Murugan Commented Sep 10, 2018 at 7:13
• Then please provide a minimal reproducible example reproducing the issue. – user4676340 Commented Sep 10, 2018 at 7:14
• (you can use stackblitz.io) – user4676340 Commented Sep 10, 2018 at 7:14
• add the generated url in your question – John Velasquez Commented Sep 10, 2018 at 7:24

3 Answers 3

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

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

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

:-)