# Access the contents of Observable list

**URL:** <https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216>\
**Category:** How-to Discussions\
**Created:** [March 21, 2016, 7:56pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216 "2016-03-21T19:56:05Z")\
**Posts on this page:** 15\
**Page:** 2

<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:** [March 21, 2016, 9:42pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/21 "2016-03-21T21:42:59Z")

</div>

Like so:

```auto
function getScores() {
    return fetch('https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=100&q=https://twitrss.me/twitter_user_to_rss/?user=simplenbascores&#39;)
        .then(function(response) {
            return response.json();
        }).then(function(responseObject) {
            var titles = Observable();
            data.value = responseObject;
            responseObject.responseData.feed.entries.forEach(function(entry) {
                titles.add(entry);
            });
            return titles;
        });
}

var titlesPromise = getScores();

titlesPromise.then(function(titlesObservable) {
    // do stuff
});

```

---

<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 21, 2016, 9:43pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/22 "2016-03-21T21:43:03Z")

</div>

What are you going to do with your observable?

`<Each>` solves this by subscribing to changes, so that it will update the UX and the layout after the changes have been made.

---

<div class="post-metadata">

**Author:** ![Casey\_Williams](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/casey_williams/32/147_2.png) [@Casey\_Williams](https://forums.fusetools.com/u/Casey_Williams)\
**Post date:** [March 21, 2016, 9:46pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/23 "2016-03-21T21:46:46Z")

</div>

Basically, thee feed I’m getting the data from is a twitter feed and at the end of all the titles there are some hashtags etc. that I want to remove and then if possible I’d like to arrange the string like this:

`Kings 88 - 80 Knicks`

Rather than:

`The Kings won 88-80 over the Knicks #kings #knicks`

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [March 21, 2016, 9:49pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/24 "2016-03-21T21:49:38Z")

</div>

You can do this with Promises as Edwin suggested, but I would recommend doing something more like this:

```auto
var originalTitles = Observable();
var titles = originalTitles.map(function(string) {
    var newString = ...; // Here you remove your hashtags and reformat the string
    return newString;
});

function getScores() { ... } // Here you use fetch to populate originalTitles with the feed data
getScores();

```

Then, databind to `titles` from your UX using `Each`.

---

<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:** [March 21, 2016, 9:50pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/25 "2016-03-21T21:50:08Z")

</div>

You would do all that in the code I showed above:

```auto
titlesPromise.then(function(titlesObservable) {
    // do stuff
});

```

**Which doesn’t even need to be an `Observable`**

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [March 21, 2016, 9:53pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/26 "2016-03-21T21:53:56Z")

</div>

Edwin: you’d still need to put the data into an `Observable` at the end to make sure the UI would update properly when the data comes in asynchronously. You can still transform the data in promises, yes, but I prefer to stick to `Observable`'s wherever possible.

---

<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:** [March 21, 2016, 9:54pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/27 "2016-03-21T21:54:01Z")

</div>

Yea I like jake’s approach, so you have one Observable that is the full original title, and another which is tied to the original titles but formatted

---

<div class="post-metadata">

**Author:** ![Casey\_Williams](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/casey_williams/32/147_2.png) [@Casey\_Williams](https://forums.fusetools.com/u/Casey_Williams)\
**Post date:** [March 21, 2016, 9:58pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/28 "2016-03-21T21:58:51Z")

</div>

Okay thank you! When an Observable is mapped, what is the like default item eg:

`{name: "..."}`

In my case what would name be?

---

<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:** [March 21, 2016, 10:00pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/29 "2016-03-21T22:00:48Z")

</div>

@Jake can’t you use a plain Array to bind it to the UX code. But I’d still prefer Observables because of the tied mapping

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [March 21, 2016, 10:03pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/30 "2016-03-21T22:03:25Z")

</div>

@Edwin: yes, you can databind to plain data (which includes arrays), but you’re correct in that it won’t update the UI at all if it’s changed.

@Casey: There’s no magic transforms with data inside `Observable`'s. Whatever you put in the `Observable` is what comes into `map` (and subsequent `map`'s will take the previous `map`'s result as-is) 🙂

In your case, if your `getScores` function added each item’s `title` string, then each value coming into `map` would just be one of those same strings.

---

<div class="post-metadata">

**Author:** ![Casey\_Williams](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/casey_williams/32/147_2.png) [@Casey\_Williams](https://forums.fusetools.com/u/Casey_Williams)\
**Post date:** [March 21, 2016, 10:06pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/31 "2016-03-21T22:06:27Z")

</div>

So in my `Each` tag in my UX I want to do this:

```auto
<Each Items="{titles}">
    <Text Value="{what goes here?}"/>
</Each>

```

---

<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:** [March 21, 2016, 10:08pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/32 "2016-03-21T22:08:40Z")

</div>

Nothing just `{}` empty like that

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [March 21, 2016, 10:10pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/33 "2016-03-21T22:10:22Z")

</div>

Edwin’s correct, if your `Observable` just contains strings, you only need the object itself, which is what `{}` will give you.

---

<div class="post-metadata">

**Author:** ![Casey\_Williams](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/casey_williams/32/147_2.png) [@Casey\_Williams](https://forums.fusetools.com/u/Casey_Williams)\
**Post date:** [March 21, 2016, 10:12pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/34 "2016-03-21T22:12:07Z")

</div>

Works! Thank you so much guys! Been really in depth and helpful! Many many thanks 😄👍

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [March 21, 2016, 10:15pm UTC](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216/35 "2016-03-21T22:15:16Z")

</div>

np 🙂

[Previous page](https://forums.fusetools.com/t/access-the-contents-of-observable-list/4216.md?page=1)