Only show page if data is available

How-to Discussions
1

Hi,

I want to know if it’s possible to only show the next page if the data response from the server is correct.

I’ve noticed that when doing a network request it takes a few seconds to get the data from my server into a observable so if I do the request and immediatly go to the next page the data won’t be available.

Right now I use timeouts to prevent this from happening but this slows down my app with x seconds every time the app makes a network request.

Here is the code I use for network requests:

function goNext(){
    fetch('www.url.to/my/server/getdata')
    .then(function(response) { return response.json(); })
    .then(function(responseObject) { 
        getData.value = responseObject; 
        if(getData._values[0]){
               setTimeout(function () {
                userData = JSON.stringify(getData._values[0].data);
                   goToNextPage();
            }, 3000);
        }
    }).catch(function(error) {console.log("Error handling");});
}

Any help on how to improve this would be welcome.

2

So that depends on what getData is. Since you’re setting the value property on it, I assume its an Observable but then you have _values so not too sure.

Anyways I think there may be one of two possible things causing this:

Instead of:

setTimeout(function () {
    userData = JSON.stringify(getData._values[0].data);
    goToNextPage();
}, 3000);

Try:

userData = JSON.stringify(getData._values[0].data);
setTimeout(function () {
    goToNextPage();
}, 3000);

Which depending on how you manipulate this in your goToNextPage function you can just do setTimeout(goToNextPage, 3000); since you’re not passing anything to the function

The other possible thing, is your server code (which that I can’t help from this)

3

The server returns a JSON string, when I put this JSON string into a Observable the Observable looks like this:

{"_subscribers":[],"_isLeaf":true,"_values":[data]}

Where data is the JSON string. This is why i use _values.

My code works fine but my question was if there is another way to fill my Observable with the JSON result without using the timeout because right now if I remove the timeout userdata will be undefined.

Judging from your answer can I asume that timeouts is the only way to do this or am I wrong?

4

Instead of checking the Observable's _values after setting it, why not check the responseObject

if (responseObject[0]) {
    getData.value = responseObject;
    userData = JSON.stringify(responseObject[0].data);
    setTimeout(function () {
        goToNextPage();
    }, 3000);
}

Try taking off the setTimeout that may work as so instead

5

Edwin Reynoso wrote:

Instead of checking the Observable’s _values after setting it, why not check the responseObject

if (responseObject[0]) {
    getData.value = responseObject;
    userData = JSON.stringify(responseObject[0].data);
    setTimeout(function () {
        goToNextPage();
    }, 3000);
}

Try taking off the setTimeout that may work as so instead

This works, Thanks!

6

Wait with or without the setTimeout?

7

without