CODEWITHSUNDEEP
javascriptnode.jsreactjsaxios
Spencer Ovetsky
Spencer Ovetsky

Reputation: 170

React.js Using axios to send integer data but get [object object] in Node.js

I am trying to send an integer to the backend to perform some calculations using axios in React. However, In the backend, I got [object object] instead. I tried to see what is in the object by doing console.log(Object.getOwnPropertyNames(req.body)) and it returns empty object

I am using body parser as well. My other route is using axios to send data(object), it worked fine. Is integer not regard as the pure integer in body.parse?

const express = require('express');
const app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json());


app.post('/buy', (req, res) => {
  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("wallet");
    var myquery = { amount: {$gt: 0} }
    console.log("New Amount:" + req.body)
    console.log(Object.getOwnPropertyNames(req.body))
    var newquery = { $set: {amount: req.body}}
    /*dbo.collection("account").updateOne(myquery, newquery, function(err, re) {
      if (err) throw err;
      console.log("Wallet updated")
      db.close();
    });*/
  });
});

My react:

handleSubmit(e){
    e.preventDefault()
    var remain = this.state.wallet - this.state.total
    console.log(remain)

    axios({ method: 'post', url: '/buy', data: remain})
}

Upvotes: 3

Views: 6095

Answers (4)

t.niese
t.niese

Reputation: 40872

In generally also numbers, boolean, strings and null without any object or array around are valid json. But axios does not treat those as JSON by default in its auto detection process, only those with typeof being equal to object will be send with the content type application/json.

You would need to set the content-type header yourself:

axios({ method: 'post', url: '/buy', data: 1, headers: {
  'Content-Type': 'application/json; charset=utf-8'
}})

Now axios would send with the "correct" content type header so that the receiver will treat it as JSON.

But now the body-parser would complain about the received data not beeing valid json. That's because of the following option:

strict
When set to true, will only accept arrays and objects; when false will accept anything JSON.parse accepts. Defaults to true.

Your code would work using the option strict: false for body-parser in combination with the Content-Type header settings for axios.

So it is possible to get it work, but the easiest way would be wrapping the integer into an object.

Upvotes: 2

Henok Tesfaye
Henok Tesfaye

Reputation: 9570

Since you access the request body using req.body.something. The data attribute must be an object type, {}. Like this,

data: { remain }

So you can access from the server using 

req.body.remain

Upvotes: -1

Spencer Ovetsky
Spencer Ovetsky

Reputation: 170

I fixed it by putting the number into an object like so:

axios({ method: 'post', url: '/buy', data: { amount : remain}})

Now it is sending the correct information. Any explanation on why it was causing error is appreciated

Upvotes: 1

Steve Holgado
Steve Holgado

Reputation: 12089

You are concatenating the object with a string in your console log:

console.log("New Amount:" + req.body)

Try this instead:

console.log("New Amount:", req.body)

Upvotes: -1

Related Questions