How to get object in queryparams using Typescript?

user_7785337 0
Viewed 18840

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.

angular4-router angular-routing angular typescript javascript
3 Answers

  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

Admin1

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

:-)

user_104911110
Related