create js object looping through input fields

Question

I have form which contains more (dynamic) wrap-segments, I am trying to create object that can be passed through jquery ajax and stored in DB.

PROBLEM is how to create multidimensional object?

this is code I have

DB:

  formID              wrapSegmentID           
  pkt                 formID  FK
  hldy                st
                      tt
                      rt

HTML:

<form name="uniqID>                     
  <div name="ws" class="wrapSegment">
    <input name="st">
    <input name="tt">
    <input name="rt">
  </div>
  <div name="ws" class="wrapSegment">
    <input name="st">
    <input name="tt">
    <input name="rt">
  </div>

  <!--it can be more .wrapSegment divs--> 
  <!--it can be more .wrapSegment divs-->
  <!--it can be more .wrapSegment divs-->

<label>
  <input class="hldy" type="checkbox"> hldy
</label>
<label>
  <input class="pkt" type="checkbox"> pkt
</label>
<a class="save">Save</a>
</form> 

JS

$('.hero-unit').on('click','.save', function (){
   var day = {  
         dayID : "id",  
         pkt: "pkt",
         hldy: "hldy",
         ws:  $(".wrapSegment").each(function() {                           
                var inputs = $(this).children(":input");
                var wsObj = $.map(inputs, function(item, y) {
                        return {
                            key: item.name,
                            value: $(item).val()
                        };
                 });            
               return (wsObj);
        })
    };  



 console.log(day); //
 return false;          
});

I am getting "ws: parent divs"

but I wish to have it like this

Object { dayID="id", pkt=0, hldy=1, ws=[Object { Object { key="1",value="1"}, Object { key=2, value=2}, {Object { key="1",value="1"}, Object { key=2, value=2} ] }

maybe is the way I am trying to submit form wrong?

Answer 1

$.each will return a jQuery object. What you want to do is something like:

$('.hero-unit').on('click','.save', function (){
   var wsObj = [];
   $(".wrapSegment").each(function() {                           
         var inputs = $(this).children(":input");
         var inputArray = $.map(inputs, function(item, y) {
                 return {
                            key: item.name,
                            value: $(item).val()
                        };
                 });      
         wsObj.push(inputArray);      
   });
   var day = {  
         dayID : "id",  
         pkt: "pkt",
         hldy: "hldy",
         ws:  wsObj
    };  

 console.log(day); //
 return false;          
});