JSON Stringify for forms with same name params

Question

I need to make a JSON out of a form with multiple fields with same name param but I want to group it as array? is it possible?

EDITED: I tried the suggested solution, but I can't use the value for name as key in the new array... Can you help me out how could I change it as {name:value[]} instead of {name:name, value:value[]} ?

var json = JSON.stringify($("#frm").serializeArray());
$("#json").html(json);


var myArray = $("#frm").serializeArray();
var groups = {};
for (var i = 0; i < myArray.length; i++) {
  var groupName = myArray[i].name;
  if (!groups[groupName]) {
    groups[groupName] = [];
  }
  groups[groupName].push(myArray[i].value);
}
myArray = [];
for (var groupName in groups) {
  myArray.push({name: groupName, value: groups[groupName]});
}

var json = JSON.stringify(myArray);
$("#json").html(json);

var myArray2 = [];
for (var groupName in groups) {
  myArray2.push({groupName: groups[groupName]});
}


var json2 = JSON.stringify(myArray2);
$("#json2").html(json2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form id="frm">
  <input type="text" name="a" value="1"/>
  <input type="text" name="b" value="2"/>
  <input type="text" name="a" value="3"/>
  <input type="text" name="b" value="4"/>
</form>
<br/>

Edited: I followed the suggested solution, its like this now:
<p id="json">
</p>

<br/>

but I can't use the value of "name" as key for the array 
<p id="json2">
</p>

<br/>
<br/>
is it possible to make it like this instead?

<br/>
<p>

{"a":[1,3], "b":[2,4]}
</p>

Possible duplicate of [Group array items using object](https://stackoverflow.com/questions/31688459/group-array-items-using-object) — Muhammet Can TONBUL, Dec 21 '17 at 06:14

Saravanan I · Accepted Answer · 2017-12-21T08:33:50.500

You could create a new object by looping through the form data

const json = $("#frm").serializeArray();
const Obj = {};
json.forEach((item) => (!Obj[item.name]) ? Obj[item.name] = [item.value] :   Obj[item.name].push(item.value))

$("#json").html(JSON.stringify(Obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<form id="frm">
  <input type="text" name="a" value="4"/>
  <input type="text" name="b" value="1"/>
  <input type="text" name="a" value="2"/>
  <input type="text" name="b" value="3"/>
</form>
<br/>


<p id="json">
</p>

Aneesh R S · Answer 2 · 2017-12-21T07:00:22.303

Use the function to format it from json

function format(json){
  var result={};
  for(var i=0; i<json.length; i++){
    if(json[i].name in result){
      result[json[i].name].push(json[i].value)
    }else{
      result[json[i].name]=[json[i].value];
    }
  }
  return result;
}

var formData = $("#frm").serializeArray()
var json = JSON.stringify(formData);
$("#json").html(json);
var formattedData = format(formData)
$("#formatted").html(JSON.stringify(formattedData));

function format(json){
  var result={};
  for(var i=0; i<json.length; i++){
    if(json[i].name in result){
      result[json[i].name].push(json[i].value)
    }else{
      result[json[i].name]=[json[i].value];
    }
  }
  return result;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form id="frm">
  <input type="text" name="a" value="1"/>
  <input type="text" name="b" value="2"/>
  <input type="text" name="a" value="3"/>
  <input type="text" name="b" value="4"/>
</form>
<br/>

currently its like this:
<p id="json">
</p>

<br/>
<br/>
formatted result

<br/>
<p id="formatted">
</p>

JSON Stringify for forms with same name params

2 Answers2