fetch request with json response

How-to Discussions
1

Hi,

I’m trying to do a simple test in fusetools where you click a button, a POST sends a username and password, the server responds back with the same username and the username is read back from the response.

I’m trying to do this with fetch, which works in the fuse emulator, however when I run this on an iOS or Android device it doesn’t work. I’ve tried to debug this on iOS, and what seems to happen is the code gets to return response.json(), but doesn’t hit console.log(“2”);

Any help would be appriciated.

<App Theme="Basic" ClearColor="#200c50">
    <iOS.StatusBarConfig Style="Light" />

    <DockPanel>
        <Style>
            <Text TextColor="#ffffff" />
            <TextInput PlaceholderColor="#ffffff80" TextColor="#ffffff" CaretColor="#ffffff" />
        </Style>

        <!-- Button colors -->
        <float4 ux:Key="C600" ux:Value="#8869e5" />
        <float4 ux:Key="C700" ux:Value="#6447b3" />
        <float4 ux:Key="CFillFore" ux:Value="#644793" />

        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />

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

            var username = Observable("");
            var password = Observable("");
            var test = Observable("");
            var test2 = Observable("");

            var areCredentialsValid = Observable(function() {
                return username.value != "" && password.value != "";
            });

            var loginButtonClick = function () {
                console.log("Button was clicked") ;

                fetch("http://www.dumplog.co.uk/auth/appLogin&quot;, {                    method: 'post',
                    body: '{"username":"' + username.value + '", "password":"' + password.value + '"}'//formData
                })
                .then(function(response) { 
                    console.log("1");
                    return response.json(); 
                })
                .then(function(responseObject) {
                    console.log("2");
                    console.log(responseObject.username);
                    test.value = "Username: " + responseObject.username;
                });
            }

            module.exports = {
                username: username,
                password: password,
                areCredentialsValid: areCredentialsValid,
                loginButtonClick: loginButtonClick,
                test: test,
                test2: test2
            };
        </JavaScript>

        <Grid Rows="1,1">
            <StackPanel Alignment="VerticalCenter">
                <Text Alignment="HorizontalCenter" FontSize="50">DumpLog</Text>
                <Text Alignment="HorizontalCenter" Opacity=".5">Track your bowel movements on the go.</Text>
            </StackPanel>
            <StackPanel Alignment="VerticalCenter" Margin="50,0,50,0">
                <TextInput PlaceholderText="username" Value="{username}" />
                <TextInput PlaceholderText="password" IsPassword="true" Value="{password}" />
                <Button Text="Log in" IsEnabled="{areCredentialsValid}" Clicked="{loginButtonClick}" />
                <Text Alignment="HorizontalCenter" Opacity=".5" Value="{test}" />
                <Text Alignment="HorizontalCenter" Opacity=".5" Value="{test2}" />
            </StackPanel>
        </Grid>
    </DockPanel>
</App>
2

Hi. Try to catch the errors, and also try to log the respons to see what happens.

        var body = { "username" : username.value, "password" : password.value };
        fetch("http://www.dumplog.co.uk/auth/appLogin&quot;, {          method: 'post',
          body: JSON.stringify(body)
        })
        .then(function(response) { 
          console.log("1");
          console.log(JSON.stringify(response));
          return response.json(); 
        })
        .then(function(responseObject) {
          console.log("2");
          console.log(JSON.stringify(responseObject));
          console.log(responseObject.username);
          test.value = "Username: " + responseObject.username;
        }).catch(function (err) {
          debug_log('Error: ' + err);
        });
3

Thanks for the help!

Catching the error revealed that CodeIgniter on the server was blocking the request with the error “Disallowed Key Characters.”.

Adding the ‘Content-Type’: ‘application/json’ header to the request fixed the issue.

                var body = { "username" : username.value, "password" : password.value };
                console.log(JSON.stringify(body));
                fetch("http://www.dumplog.co.uk/auth/appLogin&quot;, {                    method: 'post',
                    body: JSON.stringify(body),
                    headers: new Headers({
                        'Content-Type': 'application/json'
                    })
                })
                .then(function(response) { 
                    console.log("1");
                    console.log(JSON.stringify(response));
                    return response.json(); 
                })
                .then(function(responseObject) {
                    console.log("2");
                    console.log(JSON.stringify(responseObject));
                    console.log(responseObject.username);
                    test.value = "Username: " + responseObject.username;
                }).catch(function (err) {
                    debug_log('Error: ' + err);
                });