1

I have a ReactJS form, in which you can dynamically add form "parts"(sections with form input). Here's an example of what I mean by "parts":

<div>
    <input placeholder="Author" />
    <input placeholder="Age" />
    <input placeholder="Amount of books written" />
</div>

Something like this. You can add as many of these divs as you like.

I'm saving the values of these inputs in the state, which gives me a nested array like so:

this.state = {
    formdata : [
        {author: "somebody", age: 34, books: 0},
        {author: "somebody else", age: 100, books: 1}
    ]
 }

Right now I'm use axios post to post the data to node.js with express. This is my post function:

handleSubmit(e) {

    axios.post('receivedata',
        querystring.stringify({
             formdata : this.state.formdata
        }), {
            headers : {"Content-Type": "application/x-www-form-urlencoded"}
            }
        )
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
}

And this is the mongoose schema that I use:

var EntrySchema = new mongoose.Schema({
    formdata: [{type:String}],
    updated_at: {type: Date, default: Date.now}
});

and this is how I (try to) send the data to my database:

router.post("/", function(req, res) {

    newEntry.formdata = req.body.formdata;
        newEntry.save(function (err) {
            if(err)
                res.send(err);
            res.send("Entry added successfully!");
        });
    });

That doesn't work though and when I check the database, I receive an array with an empty string like so: formdata:[{""}]

I think the problem is with how the schema is set up, since, when I do console.log(this.state.formdata) it correctly returns the data. My next guess would be that axios is not able to send nested array, but after some research I found that that's not the case so I'm assuming that there's a special way to define nested arrays in the mongoose schema? How would I go about that?

Edit: I was thinking that maybe I could do something along the lines of:

var EntrySchema = new mongoose.Schema({
    formdata: [{
        author: String,
        age: Number,
        books: Number
    }],
    updated_at: {type: Date, default: Date.now}
});

I tried this and it doesn't work either. Now, I don't know if I'm on the right track or how else to do this. I also tried changing the Content-Type in the header to "application/ json", as suggested in another answer. Once again, it didn't work.

Any help is appreciated.

1 Answer 1

2

Okay so after some playing around I figured it out: I used querystring.stringify() before, after changing it to JSON.stringify() it worked perfectly for me.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.