How do I Each an Observable Array?

How-to Discussions
1

Hi!

I’m getting some data via fetch() and updating an array initialized as an Observable. This works just fine, but when trying to run the value through an Each nothing happens. I’ve made a mockup of what I’m trying to do.

    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var arr = [{
            text: "Heisan"
        },
        {
            text: "Hade"
        }];

        var fArr = Observable();

        fArr.value = arr;

        module.exports = {
            arr: fArr
        }
    </JavaScript>

    <StackPanel>
        <Each Items="{arr}">
            <Text Color="Black" Value="{text}"/>
        </Each>
    </StackPanel>
</App>

arr here represents the array I’m getting via fetch() which I’m assigning to the observable by doing fArr.value = arr. According to your examples I think this should work. Is this now outdated?

2

The way you’ve set it up the Observable contains only 1 object - the array itself - and that doesn’t have any property called “text”.

Try fArr.replaceAll(arr) instead to add the contents of the array to the observable list.

3

Thanks! That solved it :slight_smile:

Does this mean that for instance https://www.fusetools.com/examples/news-feed isn’t valid anymore, or have I misunderstood something fundamentally?

4

If you look closer you’ll see that the Each references dataSource.responseData.feed.entries, which I assume is an array of objects containing the properties that are databound inside the tag. :slight_smile:

5

Ah, gotcha :slight_smile: