# Route parameter must be serialized Error/ Get Data to 3rd Page

**URL:** <https://forums.fusetools.com/t/route-parameter-must-be-serialized-error-get-data-to-3rd-page/4545>\
**Category:** How-to Discussions\
**Created:** [October 24, 2016, 1:07pm UTC](https://forums.fusetools.com/t/route-parameter-must-be-serialized-error-get-data-to-3rd-page/4545 "2016-10-24T13:07:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![alain](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/alain/32/283_2.png) [@alain](https://forums.fusetools.com/u/alain)\
**Post date:** [October 24, 2016, 1:07pm UTC](https://forums.fusetools.com/t/route-parameter-must-be-serialized-error-get-data-to-3rd-page/4545/1 "2016-10-24T13:07:43Z")

</div>

El Capitain. Fuse 0.271.1 - 7935  
So I have edited hikr example so that when you click on a list item, it takes you to a view of just that list item. Like so [https://gyazo.com/5880bf32220a9d5f6fba16448157c3c2](https://gyazo.com/5880bf32220a9d5f6fba16448157c3c2) or attached

- [Attached MP4 file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/WAwAzG22Lr3k-image-1477314228376.mp4)  
As you see, if you click the edit button you get the serialization error.

The code going from the list to the item view is ``` var Context = require(“Modules/Context”);

function goToHike(arg) {  
var hike = arg.data;  
router.push(“editHike”, hike);  
}

function openHike(args) {  
var hike = args.data;  
console.log(hike);  
router.push(‘hike’, hike);  
};

module.exports = {  
hikes: Context.hikes,  
openHike: openHike,  
goToHike: goToHike  
}; ```

Code going from item view to editable item view is:

````auto
var Context = require("Modules/Context");
var Observable = require('FuseJS/Observable');
	var currentHike = Observable();
	this.Parameter.onValueChanged(module, function(p) {
	    currentHike.value = p;
	});

function back() {
	router.goBack();
}

function goToEditHike(arg) {
    router.push("editHike", currentHike);
};

module.exports = {
    hike: currentHike,
    back: back,
    goToEditHike: goToEditHike
}; ```

Any ideas on what is happening here?
````

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [October 24, 2016, 3:52pm UTC](https://forums.fusetools.com/t/route-parameter-must-be-serialized-error-get-data-to-3rd-page/4545/2 "2016-10-24T15:52:11Z")

</div>

Hi!

The quick fix for your problem is to change `router.push("editHike", currentHike` to `router.push("editHike", currentHike.value)`.  
The problem is that the router expects the data you send to be serializable. Normal JS data objects are serializable, but functions are not. Observables do contain more than just data, and therefore you have to use the .value property get it.

While the above fixes your issue, it is not considered good practice. When passing data to the router, it has to serialize and deserialize your data, which is an unnecessary amout of work. Instead, use the id’s defined in the data-model (as we do in the tutorial) to access the data through the Context/Backend JS modules.

I would start by looking at this chapter:  
[https://www.fusetools.com/docs/tutorial/mock-backend](https://www.fusetools.com/docs/tutorial/mock-backend)

The code added there shows this structure and how we use it to access data. Since you want to get an arbitrary item (hike) based on its id, you have to add a function to do this:  
A function with signature ala : `function getHike(id){ return the correct hike based on id }`.

I hope this was helpfull! If anything was unclear, please let me know.