# Observables on an array of objects

**URL:** <https://forums.fusetools.com/t/observables-on-an-array-of-objects/2175>\
**Category:** How-to Discussions\
**Created:** [October 29, 2016, 12:19am UTC](https://forums.fusetools.com/t/observables-on-an-array-of-objects/2175 "2016-10-29T00:19:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Roland](https://avatars.discourse-cdn.com/v4/letter/r/3ab097/32.png) [@Roland](https://forums.fusetools.com/u/Roland)\
**Post date:** [October 29, 2016, 12:19am UTC](https://forums.fusetools.com/t/observables-on-an-array-of-objects/2175/1 "2016-10-29T00:19:51Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [October 31, 2016, 7:19am UTC](https://forums.fusetools.com/t/observables-on-an-array-of-objects/2175/2 "2016-10-31T07:19:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Roland](https://avatars.discourse-cdn.com/v4/letter/r/3ab097/32.png) [@Roland](https://forums.fusetools.com/u/Roland)\
**Post date:** [October 31, 2016, 10:00pm UTC](https://forums.fusetools.com/t/observables-on-an-array-of-objects/2175/3 "2016-10-31T22:00:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [November 4, 2016, 9:04am UTC](https://forums.fusetools.com/t/observables-on-an-array-of-objects/2175/4 "2016-11-04T09:04:33Z")

</div>

Hi!

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

```auto
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:

```auto
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.