Convert dynamic list object in form to JSON with javascript

Question

I have a form submission script that converts form inputs to JSON and submits with ajax. It works for the simple forms that I have used it for previously, but when I try to use it for lists it is not read correctly.

Inside the form there is a dynamic list of inputs that is generated by another script. The list items look like this:

<li><input type="checkbox" name="skill_list[]" value="10155"></li>

The function that reads the form looks like this:

var formToJSON = elements => [].reduce.call(elements, (data, element) => {

  data[element.name] = element.value;
  return data;

}, {});

Inside the event listener for the submit button, the function is called:

var data = formToJSON(this.elements);

And finally, before submission, the data is stringified:

var data = JSON.stringify(data);

The error occurs in the formToJSON function. Instead of creating an object with the name skill_list and a value like {10155, 10288, 10240} it creates an object with the name skill_list[] and the value is whatever the first value in the list is.

I've been trying to rewrite the function to recognize a list but I haven't been able to and I'm running out of ideas. Can someone please help guide me in the right direction?

PS. I would prefer to write this without jQuery.

hsz · Accepted Answer · 2017-11-21 12:13:42Z

1

You have to handle array of elements separately:

var formToJSON = elements => [].reduce.call(elements, (data, element) => {
  var isArray = element.name.endsWith('[]');
  var name = element.name.replace('[]', '');

  data[name] = isArray ? (data[name] || []).concat(element.value) : element.value;
  return data;
}, {});

answered Nov 21, 2017 at 12:13

hsz

153k63 gold badges268 silver badges320 bronze badges

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

1 Comment

Thomas Over a year ago

Thank you! This is perfect!

Ram Venkat · Accepted Answer · 2017-11-21 12:10:57Z

0

If you want to convert form data into json object, try the following

var formData = JSON.parse(JSON.stringify($('#frm').serializeArray()));

answered Nov 21, 2017 at 12:10

Ram Venkat

941 silver badge11 bronze badges

Collectives™ on Stack Overflow

Convert dynamic list object in form to JSON with javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related