Convert form fields into JSON object

Question

I have the following form:

<form id="myForm" method="POST">        
    <input type="text" name="matrix[]" value="1"/><br/>
    <input type="text" name="matrix[]" value="2"/><br/>
    <input type="text" name="matrix[]" value="3"/><br/>     
    <input type="text" name="multi_matrix[colors][]" value="red"/><br/>
    <input type="text" name="multi_matrix[colors][]" value="blue"/><br/>        
    <input type="text" name="multi_matrix[weight][]" value="75"/><br/>
    <input type="text" name="multi_matrix[weight][]" value="83"/><br/>      
    <input type="submit" value="Send">
</form>

now I want to use JavaScript/jQuery to convert those values into JSON string. When I use JSON.stringify($("#myForm").serializeArray()) code then it returns the following:

[{"name":"matrix[]","value":"1"},{"name":"matrix[]","value":"2"},{"name":"matrix[]","value":"3"},{"name":"multi_matrix[colors][]","value":"red"},{"name":"multi_matrix[colors][]","value":"blue"},{"name":"multi_matrix[weight][]","value":"75"},{"name":"multi_matrix[weight][]","value":"83"}]

as you can see all fields have a separate entry, but I want to join them together to get the following:

{"matrix":[1,2,3],"multi_matrix":{"colors":["red","blue"],"weight":[75,83]}}

Is there any built-in function that can do this ? Or do I have to iterate through all fields and create JSON manually on my own ?

Sorry, my answer was incorrect. Look at the second answer in http://stackoverflow.com/questions/11338774/serialize-form-data-to-json — AmmarCSE, Jun 14 '15 at 17:37
possible duplicate of [Convert form data to JavaScript object with jQuery](http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery) — Marcos Dimitrio, Jun 14 '15 at 17:52
Thank you, the solution posted in linked topic seems to work correctly. — ArturoO, Jun 14 '15 at 19:28

score 1 · Answer 1 · answered Jun 14 '15 at 19:52

My variant:

arr = $("#myForm").serializeArray();

var res={};
var m,o;
arr.forEach(function(item){
 m = item.name.match(/[^\]\[]+/g);
 o = res;
 m.forEach(function(v,i,a){
  if(o[v] === undefined) {
   if(i+1 !== a.length) {
    o[v] = {};
    o = o[v];
    return;
   }
   o[v] = [item.value];
  } else {
   if(i+1 !== a.length) {
    o = o[v];
    return;
   }
   o[v].push(item.value);
  }
 });
})

console.log(res)
$('<pre>'+JSON.stringify(res)+'</pre>').appendTo('#result')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form id="myForm" method="POST">        
    <input type="text" name="matrix[]" value="1"/><br/>
    <input type="text" name="matrix[]" value="2"/><br/>
    <input type="text" name="matrix[]" value="3"/><br/>     
    <input type="text" name="multi_matrix[colors][]" value="red"/><br/>
    <input type="text" name="multi_matrix[colors][]" value="blue"/><br/>        
    <input type="text" name="multi_matrix[weight][]" value="75"/><br/>
    <input type="text" name="multi_matrix[weight][]" value="83"/><br/>     
    <input type="text" name="multi_matrix[weight_real][]" value="83.32"/><br/>   
    <input type="text" name="multi_matrix[weight_real][]" value="83.65"/><br/>       
    <input type="text" name="multi_matrix[price][unreal][]" value="383.32"/><br/>   
    <input type="text" name="multi_matrix[price][unreal][]" value="183.65"/><br/>    
    <input type="submit" value="Send">
</form>
<div id="result"></div>

{
    "matrix": ["1", "2", "3"],
    "multi_matrix": {
        "colors": ["red", "blue"],
        "weight": ["75", "83"],
        "weight_real": ["83.32", "83.65"],
        "price": {
            "unreal": ["383.32", "183.65"]
        }
    }
}

score 1 · Accepted Answer · edited May 23 '17 at 11:58

You can extend jQuery and create a UDF serializeObject like done in this answer, based on the serializeArray():

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Convert form fields into JSON object

2 Answers2

Linked