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

How-to Discussions
1

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 or attached

  • Attached MP4 file
    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:

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?
2

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

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.