Firebase push new data

General
1

Hey

Newbie here. Below is a js code fetching data from firebase. My question is how to reload the updated data from firebase when user tap reload button without exiting the app. I see when I exit app and open it again all the new data will be fetched. My initial thought was Observable watches any changes and push new data automatically. By reading docs, that’s not how Observable works. Any simple way to reload data without exiting app?
Thank you

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

                   var tag = Observable();
                   var dbData = Observable();

                   fetch('https://fusetags.firebaseio.com/tags.json', {
                   	method: 'GET',
                   	cache: 'default',
                   	headers: { "Content-type": "application/json"}
                   })
                       .then(function(result) {
                        if (result.status !== 200) {
                        console.log("Something went wrong :(");
                        return;}
                       	return result.json();
                     })
                        
                       .then(function(data) {
                       	var keys = Object.keys(data);
                        keys.forEach(function(key, index) {
                          if (index >= dbData.length) {
                             var value = data[key];
                             dbData.add(value);

                           }
                        })
                       });

    var reloadFunc = function ()
    {
    }
2

You need to put the code that fetches the data inside of your reload() function, bind that function to a button click, and also call the function on app startup, like so:

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

    var tag = Observable();
    var dbData = Observable();

    function reload() {
        fetch('https://fusetags.firebaseio.com/tags.json', {
            method: 'GET',
            cache: 'default',
            headers: { "Content-type": "application/json"}
        }).then(function(result) {
            if (result.status !== 200) {
                console.log("Something went wrong :(");
                return;
            }
            return result.json();
        }).then(function(data) {
            console.log("got data");
            var keys = Object.keys(data);
            keys.forEach(function(key, index) {
                if (index >= dbData.length) {
                    var value = data[key];
                    dbData.add(value);
                }
            });
        });
    }

    reload();
    
    module.exports = {
        reload: reload,
        data: dbData
    };
    </JavaScript>
    <DockPanel>
        <Panel Dock="Top" Width="240" Height="56" Margin="4">
            <Clicked Handler="{reload}" />
            <Text Value="Reload" Alignment="Center" TextColor="#fff" />
            <Rectangle Color="#18f" CornerRadius="2" />
        </Panel>
    </DockPanel>
</App>
3

Uldis wrote:

You need to put the code that fetches the data inside of your reload() function, bind that function to a button click, and also call the function on app startup, like so:

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

    var tag = Observable();
    var dbData = Observable();

    function reload() {
        fetch('https://fusetags.firebaseio.com/tags.json', {
            method: 'GET',
            cache: 'default',
            headers: { "Content-type": "application/json"}
        }).then(function(result) {
            if (result.status !== 200) {
                console.log("Something went wrong :(");
                return;
            }
            return result.json();
        }).then(function(data) {
            console.log("got data");
            var keys = Object.keys(data);
            keys.forEach(function(key, index) {
                if (index >= dbData.length) {
                    var value = data[key];
                    dbData.add(value);
                }
            });
        });
    }

    reload();
    
    module.exports = {
        reload: reload,
        dbData: dbData
    };
    </JavaScript>
    <DockPanel>
        <Panel Dock="Top" Width="240" Height="56" Margin="4">
            <Clicked Handler="{reload}" />
            <Text Value="Reload" Alignment="Center" TextColor="#fff" />
            <Rectangle Color="#18f" CornerRadius="2" />
        </Panel>
    </DockPanel>
> > ``` Thanks for reply Uldis. But when I try to click reload button there seems no change on app even though I change data on firebase backend. Data change happens only after I close and rebuilt preview. If you look above code I used each tag to display data.
4

Well if you only keep adding new data to an Observable list, you will likely find it at the bottom of the list generated by the Each. Consider reading more about Observables, specifically .replaceAll().