Passing data to other JS file

General
1

Hi, I have two JS files. One handles the login page and the other handles the mainpage. I would like to pass the email used to log in to the mainpage.js. I checked the tutorial and found this should work :

In loginpage.js:

...
router.goto("homepage", { email : login_email.value } );
...

And in the mainpage.js:

...
var email = this.Parameter;
var email_used = email.map( function(x) { return x.email; } );
...

When I try to output the passed email, this happens:

...
console.log("Email : " + email_used); // Returns (observable)
console.log("Email : " + email_used.value); // Returns undefined
...

Any help ?

2

Hey Brian.

It would be better if you could share complete minimal reproduction code.

From what I see, I think you forgot to add a subscriber to email_used. Try adding email_used in module.exports like this:

module.exports = {
  email_used: email_used
}

Hope this helps.

3

Hi Arturs,

So, it doesn’t work quite yet. Here is the minimal reproduction code.

Mainview.ux:

...
<Navigator DefaultPath="loginpage">
	<LogInPage ux:Template="loginpage" router="router"  />
        <HomePage ux:Template="homepage" router="router" />
	<FinishPage ux:Template="finishpage" router="router" />
</Navigator>
...

Mainview.js:

...
// Email to pass
var email_to_use = Observable("testing@gmail.com")
...
// Wait 1 second then proceed to homepage
var timer = setTimeout( function() { 
    router.goto("homepage", { email : email_to_use.value } )
}, 1000 );
...
// Module export
module.exports = {
	email_to_use : email_to_use
}

Homepage.ux is found in the Pages folder together with all the other pages ux. Hence:

Pages/Homepage.ux:

...
<Navigator DefaultPath="chooseservicepage">
	<!-- Choose the service panel -->
	<ChooseServicePage ux:Template="chooseservicepage" />

	<!-- Choose the location panel --> 
	<ChooseLocationPage ux:Template="chooselocationpage" />

	<!-- Choose the contact panel -->
	<ChooseContactPage ux:Template="choosecontactpage" />
</Navigator >
...

Pages/Homepage.js:

var Observable = require("FuseJS/Observable");
var email = this.Parameter;

// When I try to print the email like this:
console.log(JSON.stringify(email));

// This is the result :
// {"_origin":-22,"_subscribers":[],"_isProxy":true,"_values":[],"_subscriptionWatchers":[{"watcherId":4}]}
...

There is no value passed as you can see in the JSON result.
Any help ?

Thanks

4

The value is passed, but you’re missing something else.

As explained in docs, this.Parameter is an implicit, derived Observable. As such, the value of it can not be accessed imperatively like you did.

Since it’s async, you need to .map() on it, or use another reactive Observable operator to otherwise subscribe to this.Parameter, and you’ll get the value there when it eventually becomes available.

var param = this.Parameter;
console.log(JSON.stringify(param)); // this won't work, the Observable is empty at this point
param.onValueChanged(module, function(x) {
    // eventually, when the value becomes available, onValueChanged fires this callback
    console.log("param now is: " + JSON.stringify(x)); // this will work
});
var email = this.Parameter.map(function(x) {
    // eventually, when the value becomes available, this callback is fired as well
    // BUT only if you actually use "email" somewhere!
    console.log("email is: " + x.email); // this will work too
    return x.email; // plus it will fill the derived "email" Observable with this value
});

// since the "email" Observable needs to have a subscriber for it to actually get calculated, let's export it:
module.exports = {
    email: email
};