Access the contents of Observable list

Like so:

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')
        .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
});

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.

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

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

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.

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

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

Which doesn’t even need to be an Observable

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.

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

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

{name: "..."}

In my case what would name be?

@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

@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) :slight_smile:

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.

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

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

Nothing just {} empty like that

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

Works! Thank you so much guys! Been really in depth and helpful! Many many thanks :smile::+1:

np :slight_smile: