jQuery Form - Serialize into multi dimensional array?

Question

I need to get value from form, format it to JSON and post it via AJAX. This is the format I want to achieve:

{
  items: [
    { id: 7, name: 'Book', price: 5.7 },
    { id: 5, name: 'Pencil', price: 2.5 }
  ]
}

Here's the HTML:

(function($){
  
  var $form = $('form');
  
  // serializeArray format is way off from what I need
  var rawData = $form.serializeArray();
  console.log(rawData)
  
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset>
    <h2>Product 1</h2>
    <input type="hidden" name="items[0][id]" value="7">
    <input type="text" name="items[0][name]" value="Book">
    <input type="number" name="items[0][price]" value="5.7">
  </fieldset>
  
  <fieldset>
    <h2>Product 2</h2>
    <input type="hidden" name="items[1][id]" value="5">
    <input type="text" name="items[1][name]" value="Pencil">
    <input type="number" name="items[1][price]" value="2.5">
  </fieldset>
</form>

Should I loop and use regex to parse the name? or is there built-in way?

I can change the <form> format if needed.

No, I mean I want to get all the data from the input to form that JSON. I need to post it via Ajax. I'll edit the Question to make it more clear — hrsetyono
– hrsetyono, Commented Aug 23, 2016 at 4:58

vijayP · Accepted Answer · 2016-08-23 05:25:06Z

Please take a look at this approach. We can't just use $.serializeArray() but also we need some custom code as follows. Actually we need to iterate over all <fieldset> to get JSON as we needed:

(function($) {

  var $form = $('form');
  var fieldSets = $form.find("fieldset");
  var result = {
    items: []
  };
  fieldSets.each(function() {
    var fields = {};
    $.each($(this).serializeArray(), function() {
      fields[this.name] = this.value;
    });
    result.items.push(fields);
  });

  console.log(result);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset>
    <h2>Product 1</h2>
    <input type="hidden" name="id" value="7">
    <input type="text" name="name" value="Book">
    <input type="number" name="price" value="5.7">
  </fieldset>

  <fieldset>
    <h2>Product 2</h2>
    <input type="hidden" name="id" value="5">
    <input type="text" name="name" value="Pencil">
    <input type="number" name="price" value="2.5">
  </fieldset>
</form>

Note: Modified the HTML a bit as instead of name="items[0][id]" i have given as name="id"

Arun P Johny · Accepted Answer · 2016-08-23 05:24:18Z

You can't use the default serialization here, instead you can do a manual serialization like

(function($) {

  var $fieldsets = $('form fieldset');

  var items = $fieldsets.map(function(i, fs) {
    var obj = {};
    $(fs).find('input').each(function() {
      obj[this.name.match(/\[([^\[]*)\]$/)[1]] = this.value;
    });
    return obj;
  }).get();

  var rawData = {
    items: items
  };
  console.log(rawData)

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset>
    <h2>Product 1</h2>
    <input type="hidden" name="items[0][id]" value="7">
    <input type="text" name="items[0][name]" value="Book">
    <input type="number" name="items[0][price]" value="5.7">
  </fieldset>

  <fieldset>
    <h2>Product 2</h2>
    <input type="hidden" name="items[1][id]" value="5">
    <input type="text" name="items[1][name]" value="Pencil">
    <input type="number" name="items[1][price]" value="2.5">
  </fieldset>
</form>

Makyen · Accepted Answer · 2016-08-23 06:12:11Z

Yes, you will need to parse the name field yourself. There is no automated method of parsing a custom field. There are, of course, multiple methods of doing so.

NOTE: I'm assuming that your name="items[0][id]" field specifies that this must be the 0th item in the resulting array, and that such sets of <input> fields are not, necessarily, in ascending order by item # within the DOM. In other words, the item[N] should be controlling over it being the Qth <fieldset> in the <form>.

You could use serializeArray() and then process that data:

(function($){
  
  var $form = $('form');
  var data = $form.serializeArray();
  var result =  {items:[]};
  data.forEach(function(input){
    nameArray = input.name.split(/[[\]]/);
    item = nameArray[1];
    prop = nameArray[3];
    if(typeof result.items[item] !== 'object'){
      result.items[item]={};
    }
    if(typeof result.items[item][prop] !== 'undefined'){
      //Consistency check the name attribute
      console.log('Warning duplicate "name" property =' + input.name);
    }
    result.items[item][prop]=input.value;
  });
  console.log(result);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset>
    <h2>Product 1</h2>
    <input type="hidden" name="items[0][id]" value="7">
    <input type="text" name="items[0][name]" value="Book">
    <input type="number" name="items[0][price]" value="5.7">
  </fieldset>
  
  <fieldset>
    <h2>Product 2</h2>
    <input type="hidden" name="items[1][id]" value="5">
    <input type="text" name="items[1][name]" value="Pencil">
    <input type="number" name="items[1][price]" value="2.5">
  </fieldset>
</form>

Or, you could directly process it from the DOM:

(function($){

  var result =  {items:[]};
 
  $('form fieldset input').each(function(){
    nameArray = this.name.split(/[[\]]/);
    item = nameArray[1];
    prop = nameArray[3];
    if(typeof result.items[item] !== 'object'){
      result.items[item]={};
    }
    if(typeof result.items[item][prop] !== 'undefined'){
      //Consistency check the name attribute
      console.log('Warning duplicate "name" property =' + this.name);
    }
    result.items[item][prop]=this.value;
  });
  console.log(result);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset>
    <h2>Product 1</h2>
    <input type="hidden" name="items[0][id]" value="7">
    <input type="text" name="items[0][name]" value="Book">
    <input type="number" name="items[0][price]" value="5.7">
  </fieldset>
  
  <fieldset>
    <h2>Product 2</h2>
    <input type="hidden" name="items[1][id]" value="5">
    <input type="text" name="items[1][name]" value="Pencil">
    <input type="number" name="items[1][price]" value="2.5">
  </fieldset>
</form>

Thanks for your answer. The items[0] is just example to avoid duplicate name. I guess it's okay to use duplicate name like just id or name like the answer by vijayP
@DarcCode, Thanks. It is often convenient for the name attribute to be duplicated (it can be used to group elements) (e.g getElementsByName()). Another time, please mention in the question that the HTML can be changed. When I read the question, I assumed you are attempting to use JavaScript to get to your desired JSON based on HTML which was in that exact format. Both that assumption, and vijayP's assumption (HTML can be changed as convenient) are valid given the way it is written. Indicating in the question which is the case would help people provide you with better answers.
@Makyen Thanks for the advice, I'll give more details next time I put a question.

Collectives™ on Stack Overflow

jQuery Form - Serialize into multi dimensional array?

3 Answers 3

1 Comment

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Related