Displaying data in data with <each>

How-to Discussions
1

Hey. I encountered a problem with passing data from one .ux to another .ux via .js.

First my list with persons.

var leads = [
	{
		id: 0,
		salutation: "Herr",
		firstname: "Max",
		lastname: "Mustermann",
		notes: [
			{
				"id": 1,
				"content": "This is a test"
			},
			{
				"id": 2,
				"content": "Will it work?"
			},
			{
				"id": 3,
				"content": "We will see..."
			}
		]
	},
	{
		id: 1,
		salutation: "Herr",
		firstname: "Peter",
		lastname: "Paul",
		notes: []
	},
];

```
When i press on one of the list items a js-function will be called 

```
function pushToDetailsPage(arg) {
	var lead = arg.data;
	router.push("contactDetailsPage", lead);
}

```

until this everything works fine. now the problem:

My ContactsDetail.js
```
var params = this.Parameter;

var id = params.map(function(x){return x.id;});
var salutation = params.map(function(x){return x.salutation;});
var firstname = params.map(function(x){return x.firstname;});
var lastname = params.map(function(x){return x.lastname;});
var notes = params.map(function(x){return x.notes;});

var lead = {salutation, id, firstname, lastname, company, department, position, phone, fax, mobile, email, notes};

module.exports = {
	person: lead,

};

```

in my ConteactDetailsPage.ux i wrote this (shortened):

```
<Each Items="{person.notes}" >
	<TextField TextFieldTitle="Note" TextFieldInput="{}" />
</Each>
```

And the result is this:

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/3waFzfC8JsT7-image-1484819136206.45.15.png)


My TextField.ux looks like this if it helps:

```
<Panel ux:Class="TextField" ux:Name="self" Input="Default">

	<string ux:Property="TextFieldTitle"/>
	<string ux:Property="TextFieldInput"/>
	<TextInputHint ux:Property="Input" />

	<StackPanel ItemSpacing="5" HitTestMode="LocalVisualAndChildren">

	    <Text TextColor="#fff" Value="{Property self.TextFieldTitle}"/>

	    <Rectangle Color="#222" Padding="0" CornerRadius="3">

	    	<TextView Value="{Property self.TextFieldInput}" CaretColor="White" TextColor="#ddd" InputHint="{ReadProperty self.Input}"/>

		</Rectangle>

 	</StackPanel>

</Panel>

```

How can i access the content from my notes? 
When i try {content} instead of {} the text in my TextField is empty.
2

Hi! You cannot (and should not) pass observables through the route parameter. The route parameter should just be the minimal, serializeable signature required to fetch the data from the model, kept in separate .js files.

Think of the route as a URL to where to find the data, instead of the data itself. You cannot pass objects containing logic through a URL.

Enforcing this structure creates a very nice and scaleable separation between model and view.

3

Seems you are not actually passing observables through the route in your case.

Try to reduce your ContactDetails.js to:

 module.exports = { person : this.Parameter; }

(Delete your existing code)

Then the code should work fine.

4

Hey Anders,

With your change to the code and changing the part to

<Each Items="{person.notes}" >
	<TextField TextFieldTitle="Note" TextFieldInput="{content}" />
</Each>

it worked!

file

Thanks ! :slight_smile: