# UX not responding to Observable update

**URL:** <https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502>\
**Category:** How-to Discussions\
**Created:** [January 15, 2018, 8:51pm UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502 "2018-01-15T20:51:46Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [January 15, 2018, 8:51pm UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/1 "2018-01-15T20:51:46Z")

</div>

Hey guys,

I am currently struggeling with some basic Observable handling.  
First of all, I am fetching a complex JSON structure, just like in the `Working with REST APIs` Tutorial.  
This is working just like it should.

I am fetching the data and assign it to my data variable, which is an Observable:

```auto
  API.getPois().then(function(newContent){
    var tmp = [];
    tmp.push(newContent);
    data.replaceAll(tmp);

```

The structure of my JSON data looks like this:

```auto
{"poi":[{"id":"1","title":"TITLE OF MY POI","city":"CITY OF MY POI""latitude":"LATITUDE OF MY POI","longitude":"LONGITUDE OF MY POI"}]}
....

```

In my UX-File, I each through my Observable, which is also working perfectly:

```auto
<Each Items="{data.poi}">
....
</Each

```

Initial I was going to sort my array by using the Array.Sort() function, which was only working with a copy of my array, not with the original array.  
So I experimented a bit with my Observable and found a strange behaviour which I hope you can help me get rid of:

As I mentioned, the stuff above is working perfectly.  
But if I change my Observable after the stuff above, my UX is not responding to it.

If I, for example, change the title of my first entry:

```auto
data.value.poi[1].title = "another title";

```

my UX is not changing the title.  
It is still displaying the old title but even if I, afterwards, log my change to the console `console.log(data.value.poi[1].title);`, the log is showing the correct change.

I even tried to erase the whole Observable with `.clear()` didn’t change anything.

What am I doing wrong here?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 16, 2018, 8:55am UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/2 "2018-01-16T08:55:48Z")

</div>

You haven’t fully understood how [Observables](https://www.fusetools.com/docs/fusejs/observable) work.

You are updating your Observable list of items with the result of that `fetch`, but the individual properties of those items _are not_ Observables. The fact that your list _is_ an Observable does not magically make the children objects (and their properties) Observables.

If you want to observe the titles of your POIs, what you should have is something like this:

```auto
API.getPois().then(function(newContent) {
    var tmp = [];
    newContent.poi.forEach(function(item) {
        tmp.push({
            id: item.id,
            title: Observable(item.title),
            city: item.city,
            latitude: item.latitude,
            longitude: item.longitude
        });
    })
    data.replaceAll(tmp);

```

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [January 16, 2018, 9:55am UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/3 "2018-01-16T09:55:45Z")

</div>

I see your point.  
Bur shouldn‘t the list at least update, when I clear the whole Observable?

How would this work if I want to sort the Observable?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 16, 2018, 10:00am UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/4 "2018-01-16T10:00:57Z")

</div>

That is a different question.

In your `Each`, you data-bind to `data.poi`. `data` is an Observable, but `data.poi` is not. Even more, `data` in your case is a single-value observable, and my suggested solution turns it into a proper list Observable, so you should update your `Each` to `<Each Items="{data}">`.

As for sorting, it would… just work. Please read some more about observables in the links I shared before.

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [January 16, 2018, 10:45am UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/5 "2018-01-16T10:45:33Z")

</div>

I updated my structure, but I think I still could need some of your help.

I updated my response-Array, so it now looks like this:

JSON Data:

```auto
[{"id":"1","title":"TITLE OF MY POI","city":"CITY OF MY POI""latitude":"LATITUDE OF MY POI","longitude":"LONGITUDE OF MY POI"}]
....

```

And i update my `Each` to:

```auto
<Each Items="{data}">
....
</Each

```

But now it cannot show any data.

When I log the received response, this is what it looks like:

```auto
 [[{"id":"1","title":"TITLE OF MY POI","city":"CITY OF MY POI""latitude":"LATITUDE OF MY POI","longitude":"LONGITUDE OF MY POI"}]]

```

Comparing it to the JSON-Data (thats the response I get, when checking it with a REST tool), it seems like fuse is wrapping another array arround it?

I don’t really get what’s wrong here.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 16, 2018, 10:47am UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/6 "2018-01-16T10:47:54Z")

</div>

Please post a complete, minimal, fully working reproduction that I could copy-paste and run. Think of it as a single-UX-file app.

We’ll have that sorted out in no time then.

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [January 16, 2018, 11:15am UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/7 "2018-01-16T11:15:29Z")

</div>

Here is a minimal reproduction:

UX-File:

```auto
<App>
  <JavaScript File="Main.js" />
  <ClientPanel>
    <ScrollView>
      <StackPanel>
        <Each Items="{data}">
          <Text Value="{title}" />
        </Each>
      </StackPanel>
    </ScrollView>
  </ClientPanel>
</App>

```

JS-File:

```auto
var Observable = require('FuseJS/Observable');
var data = Observable("");

loadPois();

/* Load Data and push to Observable */
function loadPois() {
  getPois().then(function(newContent){
    var tmp = [];
    tmp.push(newContent);
    data.replaceAll(tmp);
  });
}

/* Fetch Data */
function getPois(){
  return apiFetch("poi", {
    method: "GET"
  });
}

function apiFetch(path, options) {
  var url = encodeURI(ROOT_URL + path);
  if(options === undefined) {
    options = {};
  }

  if(options.body !== undefined) {
    options = Object.assign({}, options, {
      body: JSON.stringify(options.body),
      headers: Object.assign({}, options.headers, {
        "Content-Type": "application/json"
      })
    });
  }

  // Fetch the resource and parse the response as JSON
  return fetch(url, options).then(function(response) {
    // console.log(JSON.stringify(response));
    return response.json();
  }).then(function(responseObject) {
    // console.log(JSON.stringify(responseObject));
    return responseObject;
  }).catch(function(err) {
    console.log("Error: " + err);
  });
}

module.exports = {
  data: data
}

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 16, 2018, 11:19am UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/8 "2018-01-16T11:19:51Z")

</div>

There you go.

```auto
    var tmp = [];
    tmp.push(newContent);
    data.replaceAll(tmp);

```

If you’re receiving an array, why stuff it inside of another array? Change those three lines to this instead:

```auto
        data.replaceAll(newContent);

```

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [January 16, 2018, 11:42am UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/9 "2018-01-16T11:42:30Z")

</div>

Thats working perfect, thank you!

Is it correct that, from now on, I only can access all values of `data.value` by using `data.forEach`?  
Because if not, I am only getting the first element.

I am not really sure how to combine that with `array.Sort()`.

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [January 16, 2018, 11:57am UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/10 "2018-01-16T11:57:02Z")

</div>

I guess I found it out by using `data._values` instead.  
Is that the correct approach?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 16, 2018, 11:59am UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/11 "2018-01-16T11:59:45Z")

</div>

No, do not access any properties on Observables directly. The underscore hints that it’s a private property and you should treat it like that. Instead, use the methods available on Observables: [see docs](https://www.fusetools.com/docs/fusejs/observable-api).

The [docs on .value](https://www.fusetools.com/docs/fusejs/observable-api#value) state, specifically: `The value property acts as a shorthand for getAt(0) and replaceAt(0).`

A regular approach to sorting observables is using `.toArray()` to get an array, perform sorting with regular JS array sorting methods, and then executing a `.replaceAll()` with the now-sorted data.

You might find other useful methods in the Observable docs, such as `.replaceAt`, `.refreshAll` and others. Please spend some time reading docs, it’ll help a lot.

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [January 16, 2018, 12:10pm UTC](https://forums.fusetools.com/t/ux-not-responding-to-observable-update/1502/12 "2018-01-16T12:10:18Z")

</div>

Awesome, thank you for your help!  
It’s insane how quick and great the support of the Fuse Team is, thank you!