# How to use Observables correctly

**URL:** <https://forums.fusetools.com/t/how-to-use-observables-correctly/2394>\
**Category:** How-to Discussions\
**Created:** [March 30, 2016, 4:30am UTC](https://forums.fusetools.com/t/how-to-use-observables-correctly/2394 "2016-03-30T04:30:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vicker\_Leung](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vicker_leung/32/392_2.png) [@Vicker\_Leung](https://forums.fusetools.com/u/Vicker_Leung)\
**Post date:** [March 30, 2016, 4:30am UTC](https://forums.fusetools.com/t/how-to-use-observables-correctly/2394/1 "2016-03-30T04:30:39Z")

</div>

I have an Observable containing list of objects, and binded to a `Each` that display one of the object property. Everything works great so far.

Then, I want to have a function that will update the Observable objects’ properties. `console.log` shows that the data is updated, but the UX is not updated accordingly.

One of the workaround I found is something like `t_obs.replaceAll (t_obs.toArray ())` at the end of the update function, but I doubt this is the right way to make things work. Any suggestion appreciated.

```auto
<JavaScript>

var t_obs = Observable ({is_flag: true},{is_flag: false},{is_flag: false});

function update_flags ()
{
    t_obs.forEach
    (
        function (t_object)
        {
            t_object.is_flag = !t_object.is_flag;
        }
    );    
}

module.exports =
{
    t_obs: t_obs,
    update_flags: update_flags
};
</JavaScript>

<Each Items="{t_obs}">
    <SomeComponent is_flag="{is_flag}" />
</Each>

<Button text="Swap flags" Clicked="{update_flags}" />

```

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [March 30, 2016, 7:57am UTC](https://forums.fusetools.com/t/how-to-use-observables-correctly/2394/2 "2016-03-30T07:57:19Z")

</div>

The value that is being changed need to be an Observable for it to fire for it’s listeners:

```auto
var t_obs = Observable ({is_flag: Observable(true)},{is_flag: Observable(false)},{is_flag: Observable(false)});

function update_flags ()
{
    t_obs.forEach
    (
        function (t_object)
        {
            t_object.is_flag.value = !t_object.is_flag.value;
        }
    );}

```

---

<div class="post-metadata">

**Author:** ![Vicker\_Leung](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vicker_leung/32/392_2.png) [@Vicker\_Leung](https://forums.fusetools.com/u/Vicker_Leung)\
**Post date:** [March 30, 2016, 8:42am UTC](https://forums.fusetools.com/t/how-to-use-observables-correctly/2394/3 "2016-03-30T08:42:11Z")

</div>

Thanks, Bjørn-Olav Strand.

I don’t realize I can have nested Observables.