Passing Multi array object to the router

General
1

I want to know if it’s possible to pass an multi array object like below to a router

    [{"id":"1","matric_no":"2014235020035","semester":"first","course_title":"COM 111","unit":"2","ass":"36","exam":"50","total_score":"86"},
    {"id":"2","matric_no":"2014235020035","semester":"first","course_title":"COM 131","unit":"3","ass":"30","exam":"48","total_score":"78"},
   {"id":"3","matric_no":"2014235020035","semester":"first","course_title":"COM 112","unit":"3","ass":"20","exam":"50","total_score":"70"}]

If possible, what documentation supports it that I can read. Thanks

2

As explained in Navigation docs, a Router accepts an object as the parameter when routing to pages.

So, directly, it will not accept an array like you’re asking. But you could easily put the array inside of an object and pass that instead, like so: router.push("somePage", {data: [ ... ]}). Then on the other side, you need to unwrap the object and access the data node from this.Parameter.

The only thing you need to be aware of, is that the parameters you pass to a router need to be serialisable. This means that you can not pass complex objects that contain functions, such as Observables. Plain objects are fine, disregarding how complex they are (apply common sense though, don’t sent megabytes of text over router).

3

Thanks for your usual help, I was able to move the data successfully.
But,
You mentioned unwrapping the object to access the data node, I have tried using

    this.Parameter.getAt(0);

but it seems I am getting it done wrongly. Would you help with that?

PS: I’m sorry to be such a pain and I appreciate your patience

4

As explained 3 times in the other thread, parameters are implicit derived Observables. As such, they are populated asynchronously.

This means that you may not access them in imperative style like you do with .getAt() as if the data had already arrived. You need to use reactive operators to access them.

Would you please go through the docs carefully, so that you don’t have to ask the same thing again? Thanks!

// arr will eventually contain the "data" property that we passed on the object via router
// but only if there is a subscription to it
var arr = this.Parameter.map(function(p) {
    return p.data;
});
module.exports = {
    arr: arr
};
5

Thanks.
I don’t really to be such a pain, I do read the docs so well. I need experts’ knowledge because I am a beginner that’s why I ask a lot sir.

I have done that but the UX is not being populated with the Each Class used on the Items.

Here is the result of variable arr exported.

   {"_subscribers":[null],"_isLeaf":false,"_values":[[{"ass":"36","course_title":"COM 111","exam":"50","id":"1","matric_no":"2014235020035","semester":"first","total_score":"86","unit":"2"},{"ass":"30","course_title":"COM 131","exam":"48","id":"2","matric_no":"2014235020035","semester":"first","total_score":"78","unit":"3"},{"ass":"20","course_title":"COM 112","exam":"50","id":"3","matric_no":"2014235020035","semester":"first","total_score":"70","unit":"3"}]]}

And here is the usage in the UX:

  <Page ux:Class="Result">
<Router ux:Dependency="router"/>
<JavaScript>	
	var arr = this.Parameter.map(function(p){return p.data});
	debug_log(JSON.stringify(arr));
	arr.subscribe(module);
	module.exports = {
		arr:arr
	}

</JavaScript>
<ScrollView>
  <StackPanel>
		<Each Items="{arr}">
			<StackPanel Height="100" Color="#FFF" Margin="10" Padding="10">
				<Shadow Distance="3"/>
			
				<Text FontSize="25" Value="{course_title}"/>
				<Text Color="Black" FontSize="15" Value="{semester}"/>
				<Text Color="Black" FontSize="15" Value="{exam}"/>
				<Text Color="Black" FontSize="15" Value="{total_score}"/>
				
			</StackPanel>
		</Each>	
  </StackPanel>

But the UX is not been populated. No value shown.

6

Alright, so there’s again that moment when a complete, minimal reproduction would have helped immensely. Let me just point it out that it’s something you need to supply to save our time trying to help you. Here’s what a really good one looks like:

<App>
    <Router ux:Name="router" />
    
    <JavaScript>
        var param = {
            data: [
                {"ass":"36","course_title":"COM 111","exam":"50","id":"1","matric_no":"2014235020035","semester":"first","total_score":"86","unit":"2"},
                {"ass":"30","course_title":"COM 131","exam":"48","id":"2","matric_no":"2014235020035","semester":"first","total_score":"78","unit":"3"},
                {"ass":"20","course_title":"COM 112","exam":"50","id":"3","matric_no":"2014235020035","semester":"first","total_score":"70","unit":"3"}
            ]
        };

        function openPageTwo() {
            router.push("second", param);
        }

        module.exports = {
            param: param,
            openPageTwo: openPageTwo
        };
    </JavaScript>

    <Navigator DefaultPath="first">
        <Panel ux:Template="first">
            <Panel Alignment="Center" Width="240" Height="56" Clicked="{openPageTwo}">
                <Text Value="Open page two" Color="#fff" Alignment="Center" />
                <Rectangle Color="#18f" CornerRadius="2" />
            </Panel>
        </Panel>
        <SecondPage ux:Template="second" />
    </Navigator>

    <Panel ux:Class="SecondPage">
        <JavaScript>
            var arr = this.Parameter.map(function(x) {
                return x.data;
            }).expand();
            module.exports = {
                arr: arr
            };
        </JavaScript>
        <ScrollView>
            <StackPanel>
                <Each Items="{arr}">
                    <StackPanel>
                        <Text FontSize="25" Value="{course_title}"/>
                        <Text Color="Black" FontSize="15" Value="{semester}"/>
                        <Text Color="Black" FontSize="15" Value="{exam}"/>
                        <Text Color="Black" FontSize="15" Value="{total_score}"/>
                    </StackPanel>
                </Each> 
            </StackPanel>
        </ScrollView>
    </Panel>

</App>

Oh, and it shows what the problem was, and how it was solved:

            var arr = this.Parameter.map(function(x) {
                return x.data;
            }).expand();

Since the data is an array, and it gets encapsulated inside of an Observable, you ended up getting an array stored in the .value (0th element of the list) of that arr Observable. And since Each expects to receive a proper Observable list, not a single-value Observable that has an array in its .value, it doesn’t really have anything to iterate over.

Chaining .expand() to the end there makes sure that the inner array is turned into this proper Observable list, just as explained in docs.