How to get, using Javascript, the value of a parameter passed to a page?

I have three pages: MainView.ux, HomePage.ux and MusicPage.ux. I would like to use MusicPage.ux as a template: the user clicks/taps a button in HomePage which describes the kind of music (‘category’ below), with Javascript I query my JSON and I list the events according to the choice of the user (i.e. concerts, live, party, etc).

I understood how to goTo a page, but as I need to query the JSON I need to know also the value of category that the user has clicked (see MusicPage.ux). As category is an Observable I thought I could simple add to MusicPage.ux the code below and get the value:

console.log(category.value) but it returns undefined.

How do I get the value of a parameter passed to a page?

 <!-- MAINVIEW -->    
 <App>
    <Router ux:Name="router" />
    <Navigator DefaultPath="home">
        <MusicPage ux:Template="music" router="router" />
        <HomePage ux:Template="home" router="router" />
    </Navigator>
</App

<!-- HOMEPAGE -->
<Page ux:Class="HomePage">
    <Router ux:Dependency="router" />
    <Grid Dock="Bottom" Columns="1*,1*">
        <Button Text="Music" Padding="20" Clicked="{gotoMusic}" />
        <Button Text="Cinema" Padding="20" Clicked="{gotoCinema}" />
    </Grid>

    <JavaScript>
        function gotoMusic() {
            router.goto("music", { category: "Music"});
	    }
   
       module.exports = {
           gotoMusica,
       };
    </JavaScript>
</Page>

<!-- MUSICPAGE -->
<Page ux:Class="MusicPage">	
    <Router ux:Dependency="router" />
    <Button Text="Home" Clicked="{gotoHome}" />
    <Text Value="{category}" FontSize="50" />

    <JavaScript>
        var category = this.Parameter.map(function(param) {
            return param.category;	    
        });

        function gotoHome() {
            router.goto("home");
        }

        module.exports = {
            gotoHome,
            category
        }
    </JavaScript>
</Page>

maybe it is the way you are exporting category

module.exports = {
     gotoHome : gotoHome,
     category: category
}

Checked as you suggested, but nothing to do. Category is still undefined.

Enrico: can’t see anything wrong with the code you pasted. Can you please upload a .zip with complete test case + steps to reproduce? Thanks

Hi Anders,

Thank you for your time. I uploaded the file Pages.zip to [https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK]. I cannot wait to know your opinion about this issue!

Easy to reproduce:
Run Preview > Local (right click on MainView.ux), open Monitor, click the two links goto Music and/or goto Shows, look at console output.

Returned output: Category music: undefined

Expected output: Category music: Music

Fuse 0.35.0 build 10867, Windows 10 64bit

Sorry guys, still getting mad with the code in the above post where console.log(category.value) reports undefined.

Docs say:

Empty observables will have .value === undefined and .length === 0 and that’s the case: the Observable category is actually empty, but I don’t undestand why considering that

<Text Value="{category}" FontSize="50" />

is correctly filled out as it should be (<Text Value="Music" FontSize="50" />).

Fuse 0.36.1 build 12010, Windows 10 64bit

Hi Enrico,

I’m flying blind here since the snippets you posted do not show where you’ve added those console.log() calls.

However, since you now stated that the Text element receives the correct value, I can make an educated guess and maybe solve it for you.

So let’s break apart this bit of JavaScript you have:

var category = this.Parameter.map(function(param) {
    return param.category;
});
...
module.exports = {
    category: category
}

The fact that you have added category to your module.exports and you use it in UX, means that it is consumed, which is very important for observables that are a result of a reactive operation (.map() in this case). So far all good.

Inside of the .map() you have this function that receives the whole object you passed from router.goto("music", { category: "Music"});. This means that the param variable value is that object. And you are correctly returning param.category (which equals to string “Music”) from the function. Now this is also cool beans, no problem at all!

Note that there are no observables in that object. Which brings us to the initial challenge: “list the events according to the choice of the user.”

There are two options:

  1. If you plan to still use the category in UX, then you can fetch stuff from inside of the function:
var category = this.Parameter.map(function(param) {
    // fetch stuff here, use param.category
    return param.category;
});
  1. If you only need the category as a param and you don’t plan to add it to module.exports and use in UX (remember you still need to consume the reactive observable!), then you can do the following:
var category = this.Parameter.map(function(param) {
    return param.category;
});

category.onValueChanged(module, function(x) {
	// fetch stuff here, use x
});

Hope this helps.

Thank you very much Uldis. I read you post four times (and will read it again!). I would have never work it out. This opens new horizons… :wink: