Array saving as blank in MongoDB database from React Axios post

Question

I have the following Schema (with some options taken out for simplicity):

const SubmitDebtSchema = new Schema ({
  balance: [{
    balanceDate: Date,
    newBalance: Number
  }]
});

And I have the following serverless function which posts the Schema to my database:

module.exports = async (req, res) => {

  res.statusCode = 200;
  res.setHeader("Content-Type", "application/json");

  await SubmitDebt.create(req.body)
  .then(() => {
    res.send(JSON.stringify({ success: true }));
  })
  .catch((err) => {
    console.log(err);
    res.send(JSON.stringify({ success: false }));
  });

};

To post to my database, I have the following Axios post call:

  onSubmit = async (e) => {

    e.preventDefault();

    const balanceDate = new Date();

    await axios.post("/api/submit/submitDebt", {
      balanceDate: balanceDate,
      newBalance: this.state.balance,
    })

    this.props.history.push('/dashboard');
  }

However, every time I submit the request, it just returns an empty array. The 'balance' array gets put into my database, but there's never anything in it. It just saves like this:

Can anyone point out where I'm going wrong here, and why my database entries aren't saving in my array?

It's worth pointing out - the rest of the call works fine! The entry is saved, it's just the array which is the problem.

also when should a new object be added to the balance array and when should a new item be added to the collection? — Ramesh Reddy
– Ramesh Reddy, Commented Nov 23, 2020 at 8:31
SubmitDebt is how the SubmitDebtSchema is imported in to my serverless function file. And at the moment, this function is just designed to create a new item for the collection. A new balance array will be done via update afterwards in a separate function. — Jon Nicholson
– Jon Nicholson, Commented Nov 23, 2020 at 8:36

Ramesh Reddy · Accepted Answer · 2020-11-23 08:54:20Z

1

Try modifying the function this way to match your schema:

module.exports = async (req, res) => {

  res.statusCode = 200;
  res.setHeader("Content-Type", "application/json");
  const submitDebt = {
   balance: [{...req.body}] // it might be better to first extract what you need and use it here.
  };

  await SubmitDebt.create(submitDebt)
  .then(() => {
    res.send(JSON.stringify({ success: true }));
  })
  .catch((err) => {
    console.log(err);
    res.send(JSON.stringify({ success: false }));
  });

};

I also noticed that you're using both await and .then, either one of them is enough.

module.exports = async (req, res) => {
    
      res.statusCode = 200;
      res.setHeader("Content-Type", "application/json");
      
      const { balanceDate, newBalance } = req.body;
      const submitDebt = {
       balance: [{balanceDate, newBalance}]
      };
      try {
       await SubmitDebt.create(submitDebt)
       res.send(JSON.stringify({ success: true }));
      } catch(err) {
       console.log(err);
       res.send(JSON.stringify({ success: false }));
      }
    };

edited Nov 23, 2020 at 8:54

answered Nov 23, 2020 at 8:41

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

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

2 Comments

Jon Nicholson Over a year ago

Thank you for the response. I've got it working now by adjusting the Axios post to reflect the object. So balance -> newBalance, balanceDate. But this would also work too, so accepting! Thanks for the help.

Ramesh Reddy Over a year ago

@JonNicholson Great! also note that you don't need both await and .then see my second snippet.

Collectives™ on Stack Overflow

Array saving as blank in MongoDB database from React Axios post

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related