# WEIRD issue with observables

**URL:** <https://forums.fusetools.com/t/weird-issue-with-observables/4393>\
**Category:** Bug Reports\
**Created:** [May 25, 2016, 8:51pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393 "2016-05-25T20:51:45Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![rainerborene](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rainerborene](https://forums.fusetools.com/u/rainerborene)\
**Post date:** [May 25, 2016, 8:51pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/1 "2016-05-25T20:51:45Z")

</div>

Just recorded a video showing the bug. As you can see changing observable variables does not trigger any redraw on the view layer. Is it a bug or am I doing something wrong?

[https://www.dropbox.com/s/6iifsril67r3cm9/fuse\_bug.mov?dl=0](https://www.dropbox.com/s/6iifsril67r3cm9/fuse_bug.mov?dl=0)

---

<div class="post-metadata">

**Author:** ![Bent](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bent/32/157_2.png) [@Bent](https://forums.fusetools.com/u/Bent)\
**Post date:** [May 25, 2016, 8:56pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/2 "2016-05-25T20:56:22Z")

</div>

Thanks for the video, but is it possible to share the code as well? Kinda hard to tell the pieces apart from the video alone. 🙂

If you don’t want to share the code publicly you can try to shink it down to a test case that reproduces the issue or send us the project via this private Dropbox (only the Fuse dev team will have access to it, and only for debugging purposes obviously):[https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK](https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK)

PS: the app looks really nice 🙂

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [May 25, 2016, 9:02pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/3 "2016-05-25T21:02:11Z")

</div>

Can’t tell what you’re doing please show a minimun use case

---

<div class="post-metadata">

**Author:** ![rainerborene](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rainerborene](https://forums.fusetools.com/u/rainerborene)\
**Post date:** [May 25, 2016, 9:02pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/4 "2016-05-25T21:02:49Z")

</div>

Hi Bent,

Just sent you the source code via Dropbox.

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [May 26, 2016, 9:40am UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/5 "2016-05-26T09:40:13Z")

</div>

Hi, could you let us know which files / variables / scenarios are relevant here? From the video it’s quite hard to see what part of the code you’re changing, and the full project is a bit much to start debugging without any further hints.

---

<div class="post-metadata">

**Author:** ![rainerborene](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rainerborene](https://forums.fusetools.com/u/rainerborene)\
**Post date:** [May 27, 2016, 12:17pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/6 "2016-05-27T12:17:12Z")

</div>

Hey Bent,

Any updates?

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [May 27, 2016, 12:19pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/7 "2016-05-27T12:19:46Z")

</div>

Hi Rainer, still waiting for more input from you, as requested in my last post. 🙂

---

<div class="post-metadata">

**Author:** ![rainerborene](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rainerborene](https://forums.fusetools.com/u/rainerborene)\
**Post date:** [May 27, 2016, 12:23pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/8 "2016-05-27T12:23:47Z")

</div>

Remi, go to ServerBridge.js file and see the fetchPolitician function, and play with the politicianSelected observer variable.

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [May 27, 2016, 12:49pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/9 "2016-05-27T12:49:32Z")

</div>

It seems (after a bit of grep’ing) that `politicianSelected` is never actually consumed by anything in your .ux, is this correct?

That would explain the lack of updates. Basically, an observable has to be used by some UX to automagically update. You can find some more info about this [here](https://www.fusetools.com/learn/fusejs#reactive-operators) and [here](https://www.fusetools.com/community/forums/permalink/521cfc97-e512-479d-b001-adc7ac811fb5).

---

<div class="post-metadata">

**Author:** ![rainerborene](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rainerborene](https://forums.fusetools.com/u/rainerborene)\
**Post date:** [May 27, 2016, 12:54pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/10 "2016-05-27T12:54:39Z")

</div>

No, this is not correct. It is used by Vot/Panels/Politicians/PoliticianDetail/PoliticianDetail.ux

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [May 27, 2016, 1:02pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/11 "2016-05-27T13:02:09Z")

</div>

Sorry, my bad, I didn’t consider the subdirectories.

Anyway, I think that what you have in PoliticianDetail.ux will only update automatically if the properties you’re actually referencing are observables.

For instance, `Value="{politicianSelected.disapproved_bills_count}"` will only update if `disapproved_bills_count` is an Observable.

---

<div class="post-metadata">

**Author:** ![rainerborene](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rainerborene](https://forums.fusetools.com/u/rainerborene)\
**Post date:** [May 27, 2016, 1:36pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/12 "2016-05-27T13:36:06Z")

</div>

Ok. But how can I force the view to be reloaded without updating each key inside the hash?

```javascript
var politicianSelected = Observable({ name: 'blah' })
politicianSelected.value = {}

// 'name' was changed here (it's not even an observer). 
// I want to reload the view at this point.
// How can I do that?

```

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [May 29, 2016, 8:37pm UTC](https://forums.fusetools.com/t/weird-issue-with-observables/4393/13 "2016-05-29T20:37:06Z")

</div>

As far as I know there’s no simple way of doing that without suffering from race conditions with the UI. See [this thread](https://www.fusetools.com/community/forums/permalink/16b66d46-c829-46af-895a-bbe40575275b) for a bit more info.

The simplest way to work around it might be by generating observables. Something along the lines of this :

```auto
function ObservableTree(properties){
    that = this;
    properties.forEach(function(k){
        khier = k.split('.');
        d = that;
        khier.forEach(function(subkey, idx){
            if( idx != khier.length - 1){
                if (!(subkey in d)){ d[subkey] = {}; }
                d = d[subkey];
            }
            else{ d[subkey] = Observable(); }
        });
    });
    this.updateTree = function(properties, data){
        dst = this;
        properties.forEach(function(k){
            khier = k.split('.');
            src = data;
            d = dst;
            khier.forEach(function(subkey, idx){
                d = d[subkey];
                src = src[subkey];
            });
            d.value = src;
        });
    };
}

politicianProps = ["kind",
    "name",
    // ....
    "classifications.Urgente",
    "classifications.Relevante"];

var politicianSelected = new ObservableTree(politicianProps);

```

and then doing this when you’ve fetched a new entry:

```auto
    politicianSelected.updateTree(politicianProps, politicianFetched);

```

I hope this can be of help. 🙂

PS: The data fetched in `fetchPolitician()` doesn’t seem to have a `fullsize_avatar_url` (just the lower resolution`avatar_url`) so you probably want to take that one from the other list.
