How to pass an array from a form using Javascript and Node js

Question

I am using a form to collect data. In the form consists a part where a tbody is present and is empty at the beginning. Using few functions, one can fill this tbody with the data from an array. The array is accessed in the js file. After completing all the aspects of the form, most of the data from the form is sent to the post request in my routes file of index.js. Most of the data items are accessed by their name attribute such as req.body.nameOfInputField.

How am I supposed to send the array in the req.body or access it?

main.hbs

<form autocomplete="off" action="/post-prop" method="post" onsubmit="return validateForm()" id="post-prop-form" enctype="multipart/form-data" class="col-lg-12">

<div class="row">
..
<table id="tableId">
..
<tbody id="bodyId">
</tbody>
..
</table>
..
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

main.js

let arr = [];

$(function(){
...
//Various functions called such as add, edit, delete are used for 'arr'
//These changes seen in tbody
}

function validateForm(){
    //This function is called onsubmit of form
    // What should be placed here or anywhere else
    // so I can send my 'arr' to POST route in index.js
}

index.js

router.post('/post-prop', isLoggedIn, upload.single('image'), function(req, res, next){
        const data = new Data({
             data1 : req.body.data1,
             data2 : req.body.data2,
             array : //What should be placed here for 'arr'
        });
});

I tried surfing the net however could not find anything that related to my issue.

Update

I am not using any AJAX function call. It is a simple post request sent from my form. The 'Data' model present in my index.js allows me to add values to attributes of the model hence I can only define data after it has been sent.

As per the answer suggested by @sigfried I added the following code in the respective files

main.js

function validateForm(){
....
  const data = {
        fields: arr
    };
    jQuery.ajax({
        data: JSON.stringify(data),
        content: 'application/json'
    });
...
}

index.js

router.post('/post-prop', isLoggedIn, upload.single('propImage'), function(req, res, next){
    console.log(req.body.fields); //However this comes as undefined
...
}

I hope I haven't been ignorant of implementing it in the wrong way.

Possible duplicate of [Can I append an array to 'formdata' in javascript?](https://stackoverflow.com/questions/14026539/can-i-append-an-array-to-formdata-in-javascript) — Heretic Monkey, Oct 09 '18 at 17:37
If my response answer your question, please, check it as the correct answer. Thank you — Rubén S. García, Oct 09 '18 at 21:55

score 1 · Answer 1 · answered Oct 09 '18 at 17:28

1

Trying to access and Array from an multipart-form-data is a little bit tricky, but you can inspect the req.body and figure it out, the best solution for me in this case will be, since I think you're using jQuery or for that matter, native XMLHttpRequest or Fetch, you can send the form content as application/json, quick jQuery example:

const data = {
  fields: [1, 2, 3]
}
jQuery.ajax({
   data: JSON.stringify(data),
   contentType: 'application/json'
})

Then in your express route you can access in a very comfortable manner, like this:

app.post('/route', function(req, res) {
    const fieldsArray = req.body.field;
})

Hope this will be helpful, cheers.

answered Oct 09 '18 at 17:28

Rubén S. García

678
7
24

I am defining my 'data' in my routes folder. Based on your solution I am not understanding how am I suppose to define it before and add it. Also related to jQuery and native XMLHTttpRequest or Fetch, I did not quite understand what you are asking. – rut_0_1 Oct 10 '18 at 06:58
@rut_0_1 Sorry for the delay, are you using body-parser module for express? – Rubén S. García Oct 11 '18 at 17:58
Yes I am using body-parser – rut_0_1 Oct 13 '18 at 10:54
@rut_0_1, check jQuery.ajax() settings [AJAX Doc](https://api.jquery.com/jQuery.Ajax/#jQuery-ajax-url-settings) because the `content` parameter is `contentType` and the default method is GET so you must set it to POST. Hope this helps, sigfried. – Rubén S. García Oct 16 '18 at 17:55

score 0 · Answer 2 · answered Oct 09 '18 at 17:33

You can simply create a json object of your data. The json object may contain nested objects, arrays, etc. Then JSON.stringify the data and send it over to node. It will be good practice to set content-type: application/json

At node level, you can simply do var obj = JSON.parse(req.body.data) and it will return you javascript object that you encoded.

You can look here for reference: Javascript : Send JSON Object with Ajax?

How to pass an array from a form using Javascript and Node js

2 Answers2