Angular2 reading parsed data

Question

Am passing data through routing but unable to retruieve it

From another component (source of the passed data)

this._router.navigate(["/tsafety/checklist-checks", truckdetails:this.regForm.value}]);

Now in the component having the checklist-checks conmponent i have (where am sending the data)

constructor(){

this.sub = this.route.params
  .subscribe(params => {
    this.truckdetails = params["truckdetails"];
    console.log(params["truckdetails"]);
  })
}

The above console displays

[object Object]

How do i read the above parameter data when its displaying an object in the console

UPDATE ROUTES FILE

 {path:'checklist-checks', component:TruckYardChecklistComponent},

Can you please check console.log(JSON.stringify(params["truckdetails"])); and let me know response — Santosh Shinde
– Santosh Shinde, Commented Aug 4, 2017 at 7:08
Please check the example from here plnkr.co/edit/UjUlWKpO0wxQfB3P6YUG?p=preview — Santosh Shinde
– Santosh Shinde, Commented Aug 4, 2017 at 7:16
I have updated the question with the full details on how am passing the data — Geoff
– Geoff, Commented Aug 4, 2017 at 7:19

JeanPaul A. · Accepted Answer · 2017-08-04 07:24:22Z

1

The result of the this.regForm.value is a json object which contains the defined fields, and their respective values.

The result of the console.log is correct because the value assigned to 'truckdetails' in the route params is the .toString() value of the this.regForm.value object.

If you'd like to pass all the data of the form, pass the whole object as optional params like so

this._router.navigate(["/tsafety/checklist-checks", this.regForm.value]);

answered Aug 4, 2017 at 7:24

JeanPaul A.

3,7441 gold badge22 silver badges30 bronze badges

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

2 Comments

Geoff Over a year ago

Thats true its an object, after passing it that way am still not able to acces some objects contained in the original data, Example a field like material is also an object ( {status:2, label:'new goods ' } ) hence alsoi throws the same problem

JeanPaul A. Over a year ago

In your case you either have to strip down the this.regForm.value into a custom object, which does not have values which are an object, and pass it as the params object. Event better, use a service to communicate the data between one component to another (either by caching the data to a variable on a service, using Observables etc). The way you're using optional parameters to transfer the form data is not correct.

TechnoCrat · Accepted Answer · 2017-08-04 07:11:20Z

1

You can use below statement to write object to console using javascript.

console.log(JSON.stringify(params["truckdetails"]));

This will print json format string in browser console when you inspect.

answered Aug 4, 2017 at 7:11

TechnoCrat

70810 silver badges20 bronze badges

6 Comments

Geoff Over a year ago

this outputs "[object Object]"

TechnoCrat Over a year ago

it should print json string by converting your object to json format.

TechnoCrat Over a year ago

are you able to expand your object browser console ? it has a little expando-toggly button beside it that lets you inspect the contents of the object.

TechnoCrat Over a year ago

May i know reason to down vote my answer? anyone who down vote please also give reason for that.

Geoff Over a year ago

Am still not able to expand the object browser console, ive upated the question with more details.

|

Prathmesh Dali · Accepted Answer · 2017-08-04 07:26:31Z

1

Actually there is small correction in your code and I think it will work:

this._router.navigate(["/tsafety/checklist-checks", this.regForm.value]);

Then in your router file do something like this

{path:'checklist-checks/:truckdetails', component:TruckYardChecklistComponent},

And now your code should work if you are getting value in this.regForm.value

answered Aug 4, 2017 at 7:26

Prathmesh Dali

2,3601 gold badge20 silver badges21 bronze badges

Comments

Santosh Shinde · Accepted Answer · 2017-08-04 07:42:33Z

1

I think you have missed out to passed the params in route path

Replace your one line code

{path:'checklist-checks', component:TruckYardChecklistComponent},

By following line

{ path: 'checklist-checks/:truckdetails', component: ComponentTwo }

Please read more about route params to here.

Demo

Hope this will help you !!

edited Aug 4, 2017 at 7:42

answered Aug 4, 2017 at 7:29

Santosh Shinde

6,0539 gold badges46 silver badges72 bronze badges

Collectives™ on Stack Overflow

Angular2 reading parsed data

4 Answers 4

2 Comments

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

6 Comments

Comments

Comments

Related