Endless Scrollable News

General
1

I can’t get this to work. Am I using the Observable add-function wrong? I want to add X news when the scroll reaches the end, but it seems like it is not.

JavaScript:

<JavaScript>
    var Observable = require("FuseJS/Observable");
    var data = new Observable();
    var skip = 0;

    function addNews() {
        fetch('https://example.com/api/news/' + 5 + '/' + skip)
        .then(function(response) { return response.json(); })
        .then(function(responseObject) { data.add(responseObject); });
        skip = skip + 5;
    }

    addNews();

    module.exports = {
        data: data,
        addNews: addNews
    };
</JavaScript>

The view:

<ScrollView ux:Name="mainScrollView" ClipToBounds="false" LayoutMode="PreserveVisual">
    <StackPanel Margin="0,0,0,15">
        <Selection MinCount="0" MaxCount="1" />
        
        <Each Items="{data.entries}">
            <Deferred>
                <EventCard layoutTarget="contentPlaceholder">
                    <Selectable Value="{id}" />
                </EventCard>
            </Deferred>
        </Each>
    </StackPanel>
    <Scrolled To="End" Within="100" Handler="{addNews}" />
</ScrollView>
2

make it

   function addNews() {
        fetch('https://example.com/api/news/' + 5 + '/' + skip)
        .then(function(response) { return response.json(); })
        .then(function(responseObject) { 
            skip = skip + 5;
            data.add(responseObject); 
        });
   }
3

felagund18@yahoo.com wrote:

make it

   function addNews() {
        fetch('https://example.com/api/news/' + 5 + '/' + skip)
        .then(function(response) { return response.json(); })
        .then(function(responseObject) { 
            skip = skip + 5;
            data.add(responseObject); 
        });
   }

Thanks! But it did not work, it does not append the new news to the data/does not show.

4

If the responseObject is an array, you will want to use .addAll() instead of .add().

5

On a second look, you are trying to loop through a nested property on an observable, like so: <Each Items="{data.entries}">. That won’t work.

Your data wants to be a list. And you want to feed it an array, using the correct methods.

You will want to change the UX to:

<Each Items="{data}">

and the JS to:

   function addNews() {
        fetch('https://example.com/api/news/' + 5 + '/' + skip)
        .then(function(response) { return response.json(); })
        .then(function(responseObject) { 
            skip = skip + 5;
            data.addAll(responseObject.entries); 
        });
   }

But all this is highly speculative, since there is zero visibility on what the data structures you are working with look like. And you clearly should go and spend some time on this page on Observables.

6

Uldis wrote:

On a second look, you are trying to loop through a nested property on an observable, like so: <Each Items="{data.entries}">. That won’t work.

Your data wants to be a list. And you want to feed it an array, using the correct methods.

You will want to change the UX to:

<Each Items="{data}">

and the JS to:

   function addNews() {
        fetch('https://example.com/api/news/' + 5 + '/' + skip)
        .then(function(response) { return response.json(); })
        .then(function(responseObject) { 
            skip = skip + 5;
            data.addAll(responseObject.entries); 
        });
   }

But all this is highly speculative, since there is zero visibility on what the data structures you are working with look like. And you clearly should go and spend some time on this page on Observables.

Thank you! I understand it now :slight_smile: