WhileTrue / WhileFalse. Object reference not set to an instance of an object

How-to Discussions
1

I’m trying to show a panel that displays the string "Loading..." as long as the data is being fetched from a JSON resource. When data is fully loaded this panel should be replaced by the main panel. I thought that a simple and effective way could be using WhileTrue and WhileFalse and a variable that acts like a flag, but I keep getting the error Object reference not set to an instance of an object in Preview and Monitor.

The weird thing is that, when the error happens, if I repeatedly click "Try again" in the Preview window after 3/4 clicks the app is ran again correctly: the Loading panel is shown while data is fetched and when all data is loaded the panel disappears and the main panel is displayed.

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

    var isLoading = Observable(true);

    fetch("http://localhost/api/api.php").then(function(response) {
         return response.json(); 
    }).then(function(json) {
        json.eventi.forEach(function(item) {

             // Fetch 'datas' here

        }, function(error) {
           console.log(error);
        });
   });
       isLoading.value = false;   // When data is loaded set the variable to FALSE
  }).catch(function(e) {
        console.log("error " + e);
  });

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

<WhileTrue Value="{isLoading}">
    <StackPanel Alignment="Center">
        <Text Value="Loading..."></Text>
    </StackPanel>
</WhileTrue>

<WhileFalse Value="{isLoading}">
    <ClientPanel>
        <ScrollView>
            <StackPanel ItemSpacing="1">
                <Each Items="{data}">
                    <!-- Display data -->
                </Each>
           </StackPanel>
        </ScrollView>
    </ClientPanel>
</WhileFalse>
2

Hi!

Instead of putting your whole app inside a WhileFalse, i would instead suggest using the WhileEmpty trigger here. https://www.fusetools.com/docs/fuse/reactive/whileempty

You can put that inside your Each, and it will be active when data has no items. Hopefully this gets rid of that error as well :slight_smile: Let me know how it goes.

3

Oook! I fixed as follows and it works:

<!-- The "Loading..." panel -->
<WhileEmpty Items="{data}">
     <StackPanel Alignment="Center">
         <Text Value="Loading..."></Text>
     </StackPanel>
</WhileEmpty>

And below:

<!-- The "Main" panel --->
<StackPanel ItemSpacing="1">
    <Each Items="{data}">
        <WhileNotEmpty Items="{data}"> 
            <!-- Display data -->
        </WhileNotEmpty>
     </Each>
</StackPanel>

But I noticed that it works also without the <WhileNotEmpty>. Instead <WhileEmpty> has to be placed outside the “Loading…” panel otherwise data won’t be displayed and “Loading…” would keep showing.

Many thanks!