Observables on an array of objects

Hi, I’m pretty new to Fuse so I am hoping that I’ve just missed something simple in regards to this:

How do you use observables on an array of objects like below?

My current code looks like I am just referencing the array as an observable and not the inside objects/object variables.

The below code will create 1 stack panel with no name value displayed instead of 3 with names.

var people = Observable([ {"id":1,"name":"Jake"}, {"id":2,"name":"Julie"}, {"id":3,"name":"Jim"} ]);

	`		<StackPanel>
				<Each Items="{people}">
					<StackPanel Padding="10" Margin="10">
						<Rectangle Layer="Background" Fill="#eee"/>
						<Text Value="{name}"/>
						<TextBox Value="{name}" />
			<StackPanel Dock="Bottom">
				<TextBox Value="{name}" PlaceholderText="Add a name"/>
			<Button Text="Add" Clicked="{addPerson}" Height="20" Background="Red"/>

Hi Roland.

Your code is almost correct.

Since Observable already acts like a list (list of observable streams), you don’t have to put an array in it to have multiple elements.

Instead of Observable([some, items]), just do Observable(some, items)

Hi Kristian

Thanks for that, removing the objects from the array seems to now display all of the items, however the values don’t seem to act like observables.

I have it set so that I display the name and have a text box linked to the name for each item however when I type into the the displayed name in the doesn’t update.

What am I doing wrong?

Further is there a simple/efficient way of extracting items from arrays (in the case of a JSON from a rest call)?


The reason for this is that the fields of your items are not observable.
You have to structure them like this:

var people = Observable([

Then when you change the values remember that you have to access them by .value:

people.getAt(0).value = "Kristian";

You can fill an observable with the contents of an array using the replaceAll method,
but since you need a deeper mapping (turning some fields into observables), i don’t think this is enough for your case.