JSON parse error: unrecognised token <

Question

I am trying to implement user registration in my app. I used node.js express to create my backend and passed a insert query in a .js file i created in the router folder. I have added all the necessary things in app.js too.

Following is my backend code.

var express = require('express');
var router = express.Router();
var mysql =  require('mysql');

var connection = mysql.createConnection({
      host: 'localhost',
      user: 'root',
      password: '',
      database:'MobileDB',
})

/* GET users listing. */
router.post('/', function(req, res, next) {

        var name = req.body.name;
        var email = req.body.username;
        var password = req.body.password;
        var phone = req.body.phone;
        connection.query("INSERT INTO `user` (`id`, `name`, `username`, `password`, `phone`) VALUES (NULL, '', '', '', '')",[null,name,username,password,phone],function(err,row,fields){
          if (err) console.log(err);

          if(row.length > 0){
              res.send({'success': true, 'message': 'welcome new user'});
          } else {
            res.send({'success':false,'message':'user not found, please try again'});
          }
      });
  });

module.exports = router;

and The following is my registration page:

import React, { Component } from 'react';
import{
  Image,
  View
} from 'react-native';
import { Container, Content, List,Thumbnail, ListItem, InputGroup, Input, Icon, Text, Picker, Button,Header,Footer} from 'native-base';
import {
Router,
Actions,
Scene } from 'react-native-router-flux';
const Item = Picker.Item;
export default class Reg extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name:'',
            username:'',
            password:'',
            phone:'',
            }

        };
    }
      Reg = () => {


            fetch('http://192.168.0.20:3000/reg', {
             method : 'POST',
                  headers: {
                  'Accept': 'application/json',
                  'Content-type': 'application/json',
                  },

                  body: JSON.stringify({
                  name:this.state.name,
                  username:this.state.username,
                  password:this.state.password,
                  phone:this.state.phone,

                  })
            })

            .then((response) => response.json())
            .then((res) => {
                  if(res.success=== true){
                  var username = res.message;

                     AsyncStorage.setItem('username', username);
                     Actions.Ideas();}
                     else {
                    alert(res.message);
                }



            })

            .done();

      }
    render(){
      return(
      <Container>
            <Content>
                    <View style={{alignSelf:'center'}}>
                    <Button transparent onPress={Actions.upload}>
                    <Icon name='ios-contact' style={{fontSize:30}}/>
                    </Button>
                    </View>
                    <View style={{top:20}}>
                    <List>
                        <ListItem>
                            <InputGroup>
                                <Icon name="ios-person-outline" style={{ color: '#5bc0de' }} />
                                <Input onChangeText={(name) => this.setState({name})}
                                  value={this.state.name} placeholder="Name" />
                            </InputGroup>
                        </ListItem>
                        <ListItem>
                            <InputGroup>
                                <Icon name="ios-at-outline" style={{color:'#5bc0de'}}/>
                                <Input onChangeText={(username) => this.setState({username})}
                                   value={this.state.username} placeholder="Email" />
                            </InputGroup>
                        </ListItem>
                        <ListItem>
                            <InputGroup>
                                <Icon name="ios-lock-outline" style={{ color: '#5bc0de' }} />
                                <Input onChangeText={(password) => this.setState({password})}
                                 value={this.state.password}placeholder="Password" secureTextEntry />
                            </InputGroup>
                        </ListItem>
                        <ListItem>
                            <InputGroup>
                                <Icon name="ios-call-outline" style={{ color: '#5bc0de' }} />
                                <Input onChangeText={(phone) => this.setState({phone})}
                                 value={this.state.phone}placeholder="Phone" keyboardType="numeric" />
                            </InputGroup>
                        </ListItem>

                    </List>
                    <Button info style={{ alignSelf: 'center', marginTop:20, marginBottom: 20 }} onPress={this.Reg}>
                        SIGN UP
                    </Button>
                    </View>
                </Content>
            </Container>

        );
    }
}

When i click on the SignUp button it shows unrecognised token error. I can't figure out where i went wrong. Please help.

192.168.0.20:3000 this IP is your local machine IP or globe IP ? — user7567423
– user7567423, Commented Mar 25, 2017 at 6:10
It worked fine for login. But i don't know why it isn't working for registration. — user7584192
– user7584192, Commented Mar 25, 2017 at 6:14

Tejashwi Kalp Taru · Accepted Answer · 2017-03-25 11:50:15Z

1

Attach Chrome debugger and enable pause on exceptions, you will get to know what is going wrong.

answered Mar 25, 2017 at 11:50

Tejashwi Kalp Taru

3,1192 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wvicioso · Accepted Answer · 2017-03-25 05:51:07Z

0

Inside your Reg() function, 'http://192.168.0.20:3000/reg' should be 'http://192.168.0.20:3000/' I believe.

I think you're getting back some unwanted HTML with your current code. I assume its because you're attempting to send a POST request to an undefined route.

Right before your if statement, console.log the response res so you know exactly what you're getting back from your backend.

answered Mar 25, 2017 at 5:51

wvicioso

5381 gold badge5 silver badges13 bronze badges

10 Comments

user7584192 Over a year ago

and i am not getting any thing. when console.log. It just goes straight to the error screen.

wvicioso Over a year ago

This might not make a difference but capitalize the T in Content-Type in the headers section of the request.

wvicioso Over a year ago

Also your route is defined as / not /reg

wvicioso Over a year ago

Do you know how to debug remotely using chrome tools?

wvicioso Over a year ago

what are you using to run the app? xcode? android studios?

|

Collectives™ on Stack Overflow

JSON parse error: unrecognised token <

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related