Error in posting JSON form data to REST api using AJAX in React

Question

I have made a simple SignUp page using React and want to send the form data to a rest api. I have included the react.min.js, react-dom.min.js and jquery.min.js .Here is my code:

<div id="container"></div>

<script type="text/babel">
  var Signup = React.createClass({
      render: function(){
        return (<div>
          <div><label>First Name</label><input type="text" ref="firstname" /></div>
          <div><label>Middle Name</label><input type="text" ref="middlename" /></div>
          <div><label>Last Name</label><input type="text" ref="lastname" /></div>
          <div><label>Email ID</label><input type="email" ref="email" /></div>
          <div><label>Email Type</label><input type="text" ref="emailtitle" /></div>

          <div><label>Password</label><input type="password" ref="password" /></div>
          <div><button onClick={this.submit}>Sign Up</button></div>
        </div>
      );
    },
    submit: function(e){
      e.preventDefault()
      var formdata = {
        "first_name" : this.refs.firstname.value,
        "middle_name" : this.refs.middlename.value,
        "last_name" : this.refs.lastname.value,
        "email" : this.refs.email.value,
        "email_title" : this.refs.emailtitle.value,
        "password" : this.refs.password.value,

      }
      var jsondata = JSON.parse(formdata);
      $.ajax({
        url: 'api-url',
        type: 'POST',
        dataType: 'JSON',
        data: jsondata,


        success: function(data){
          console.log(data);
        },
        error: function(xhr, resp, text) {
          console.log(xhr, resp, text);
        }
      });
    }


  });

    ReactDOM.render(
        <Signup />,
        document.getElementById('container')
    );
</script>

When I try to execute this, the console throws this error:

react.min.js:14 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse () at t.submit (eval at transform.run (file:///media/amit/New%20Volume1/Project/js/browser.min.js:4:28103), :93:25) at Object.r (file:///media/amit/New%20Volume1/Project/js/react.min.js:14:18287) at a (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:23308) at Object.u [as executeDispatchesInOrder] (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:23523) at p (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:20011) at f (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:20137) at Array.forEach (native) at r (file:///media/amit/New%20Volume1/Project/js/react.min.js:16:3700) at Object.processEventQueue (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:21091)

I cant understand these errors. Also, for now I had used a "#" in place of the "api-url". Am I doing this the right way? Or is there some other approach? I am new to React, AJAX etc. Plaese help.

And what is the value contained in `jsondata`? – Rory McCrossan Nov 02 '16 at 08:18 — Rory McCrossan, Nov 02 '16 at 08:18
formdata is already a json object – Beginner Nov 02 '16 at 08:25 — Beginner, Nov 02 '16 at 08:25

score 1 · Accepted Answer · answered Nov 02 '16 at 08:21

1

formdata is an object already, you shouldn't parse it. Try to remove this line:

var jsondata = JSON.parse(formdata);

answered Nov 02 '16 at 08:21

Alexandr Lazarev

12,554
4
38
47

Error in posting JSON form data to REST api using AJAX in React

1 Answers1