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.

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