Observables on an array of objects

How-to Discussions
1

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>
				</Each>
			</StackPanel>
			<StackPanel Dock="Bottom">
				<TextBox Value="{name}" PlaceholderText="Add a name"/>
			<Button Text="Add" Clicked="{addPerson}" Height="20" Background="Red"/>
			</StackPanel>
2

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)

3

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)?

4

Hi!

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

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

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.