Convert dynamic HTML tabular form to JSON

Question

I have a simple form with dynamic number of rows, each row having the same fields.

Form is present as a table, but it's not a strict requirement, so can be flexible here. On form submission I need this form data to be converted to JSON. I have this function to convert form into JSON:

function convertFormToJSON(form) {
  const array = $(form).serializeArray();
  const json = {};
  $.each(array, function () {
    json[this.name] = this.value || "";
  });
  return json;
}

But every row overwrites previous one, so I end up having only last row data in this JSON. I realize I need to have a loop and append each new row data into final JSON, but I struggle finding the criterion for this loop. Table rows? Or better not to use table and switch to a different form presentation?

Carsten Massmann · Answer

Here is a simple non-jQuery way of collecting all the input data from this form with a variable number of input elements:

document.querySelector("button").onclick=ev=>{
 let res=[...document.getElementById("tbody").children].map(tr=>
  Object.fromEntries([...tr.querySelectorAll("input,select")].map(el=>
   [el.name,el.value])));
 console.log(res);
}

input,select {width:80px;}

Convert dynamic HTML tabular form to JSON

1 Answers