Strange behavior on fetch() result

How-to Discussions
1

Hi!

The following code used to work on previous versions, but in 1.0 i get an error

<App>
	<UserEvent ux:Name="onBigPicture" />
	<OnUserEvent EventName="onBigPicture" Handler="{goBig}" />
	<JavaScript>
		
		var Observable = require("FuseJS/Observable");

		var result = Observable();
		var big = Observable();

		fetch('https://api.randomuser.me/?results=20&inc=name,picture,id').then(function(response) {
			return response.json();
		}).then(function(resultado) {
			result.value = resultado;
		});

		function goBig(args) {
			big.value = args.big;
			router.push("picture");
		}

		function volver() {
			router.goBack();
		}

		module.exports = {
			result: result,
			goBig: goBig,
			volver: volver,
			big: big
		}


	</JavaScript>

	<Router ux:Name="router" />
	<Navigator DefaultTemplate="main">
		<Page ux:Template="main">
			<Panel Alignment="TopCenter" Background="#000080" Width="100%" Height="55" Padding="10">
				<Text Color="#fff" FontSize="28" Alignment="Center" Value="Usuarios" />
			</Panel>
			<ScrollView Margin="0,55,0,0">
				<Grid ColumnCount="2">
					<Each Items="{result.results}">
						<Panel>
							<Image Url="{picture.medium}" Alignment="Left" />
							<Text Value="{name.first}" Alignment="CenterRight" Margin="5" />
							<Clicked>
								<RaiseUserEvent EventName="onBigPicture">
									<UserEventArg Name="big" Value="{picture.large}" />
								</RaiseUserEvent>
							</Clicked>
						</Panel>
					</Each>
				</Grid>
			</ScrollView>
			
		</Page>
		<Page ux:Template="picture">
			<Panel Alignment="TopCenter" Background="#000080" Width="100%" Height="55" Padding="10">
				<Text Color="#fff" FontSize="28" Alignment="Center" Value="Usuario" />
				<Text FontSize="16" Value="&lt; Volver">
					<Clicked>
						<Callback Handler="{volver}" />
					</Clicked>
				</Text>
			</Panel>	
			<Image Url="{big}" />		
		</Page>
	</Navigator>

</App>

Any idea about what should i change? I tried console.log to debug the json output, but with no luck

I get this error

{result} does not contain property 'results'

Thanks!

John

2

Hi John,

What error are you getting? Is there a log of the error? Oh, and is this on Windows or macOS and where are you trying to run the code? (local desktop preview or on devices?)

3

Hi Bent!

i get this error on the Problems tab

{result} does not contain property 'results'

I’m testing it on Local preview on OSX

Thanks

Jonatan

4

Hey John!

Huge thanks for taking the time and preparing a complete, copy-pasteable repro. Such a pleasure.

There’s two things wrong with it. Let’s start with how you work with Observables.

You do this: result.value = resultado; and then in UX you do <Each Items="{result.results}">. While that should theoretically work just fine, you’ll face some problems when you decide to manipulate the list to add/remove items. Instead, you should use result.replaceAll(resultado.results); and in UX <Each Items="{result}">.

The second thing is a Fuse issue, and a non-obvious one. If you add a .catch() block to that .fetch() call, like so:

        fetch('https://api.randomuser.me/?results=20&inc=name,picture,id').then(function(response) {
            return response.json();
        }).then(function(resultado) {
            result.replaceAll(resultado.results);
        }).catch(function(error) {
            console.log("error: " + error.message);
        });

Then you get this in Log: [Viewport]: error: Network request failed. And that, sadly, is a known issue for the local preview + HTTPS that is being worked on.

You can try running the code on a device preview, where it should work just fine. Hope this helps!

Full refactored code:

<App>
    <UserEvent ux:Name="onBigPicture" />
    <OnUserEvent EventName="onBigPicture" Handler="{goBig}" />
    <JavaScript>
        
        var Observable = require("FuseJS/Observable");

        var result = Observable();
        var big = Observable();

        fetch('https://api.randomuser.me/?results=20&inc=name,picture,id').then(function(response) {
            return response.json();
        }).then(function(resultado) {
            result.replaceAll(resultado.results);
        }).catch(function(error) {
            console.log("error: " + error.message);
        });

        function goBig(args) {
            big.value = args.big;
            router.push("picture");
        }

        function volver() {
            router.goBack();
        }

        module.exports = {
            result: result,
            goBig: goBig,
            volver: volver,
            big: big
        }


    </JavaScript>

    <Router ux:Name="router" />
    <Navigator DefaultPath="main">
        <Page ux:Template="main">
            <Panel Alignment="TopCenter" Background="#000080" Width="100%" Height="55" Padding="10">
                <Text Color="#fff" FontSize="28" Alignment="Center" Value="Usuarios" />
            </Panel>
            <ScrollView Margin="0,55,0,0">
                <Grid ColumnCount="2">
                    <Each Items="{result}">
                        <Panel>
                            <Image Url="{picture.medium}" Alignment="Left" />
                            <Text Value="{name.first}" Alignment="CenterRight" Margin="5" />
                            <Clicked>
                                <RaiseUserEvent EventName="onBigPicture">
                                    <UserEventArg Name="big" Value="{picture.large}" />
                                </RaiseUserEvent>
                            </Clicked>
                        </Panel>
                    </Each>
                </Grid>
            </ScrollView>
            
        </Page>
        <Page ux:Template="picture">
            <Panel Alignment="TopCenter" Background="#000080" Width="100%" Height="55" Padding="10">
                <Text Color="#fff" FontSize="28" Alignment="Center" Value="Usuario" />
                <Text FontSize="16" Value="&lt; Volver">
                    <Clicked>
                        <Callback Handler="{volver}" />
                    </Clicked>
                </Text>
            </Panel>    
            <Image Url="{big}" />       
        </Page>
    </Navigator>

</App>
5

Thanks for your help!
I tried it on Windows on a previous version. I think that’s the reason.

Thanks again

John