将输入字段值存储在json中并将其存储在使用javascript的字符串中

Question

我想以此格式在json字符串中插入数据（请参阅图像） 这里是json格式。我怎么能输入字段值存储在JSON和使用javascript

HTML

<form action="" method="post"> 
<div><span class="opensans size13">Going To</span> 

</div> 
<div> 
    <input list="hotelplacelist" id="hoteltypetext" class="form-control" name="city" placeholder="Place, State, Country"> 
    <datalist id="hotelplacelist" class="datal"></datalist> 
</div> 
<div class="w50percent"> 
    <div class="wh90percent textleft"> <span class="opensans size13"><b>Check in date</b></span> 

     <input type="text" class="form-control mySelectCalendar" id="datepicker" name="checkindate" placeholder="dd/mm/yyyy" /> 
    </div> 
</div> 
<div class="w50percentlast"> 
    <div class="wh90percent textleft right"> <span class="opensans size13"><b>Check out date</b></span> 

     <input type="text" class="form-control mySelectCalendar" id="datepicker2" placeholder="dd/mm/yyyy" name="checkoutdate" /> 
    </div> 
</div> 
<div class="clearfix"></div> 
<div class="clearfix"></div> 
<div class="clearfix"></div> 
</br> 
<div id="addroom"> 
    <div class="room1"> 
     <div class="row"> 
      <div class="col-md-3"> <span class="opensans size13"><br><b>Room 1</b></span> 

      </div> 
      <div class="col-md-4"> 
       <div class="wh90percent textleft left"> <span class="opensans size13"><b>Adult</b></span> 

        <select class="form-control mySelectBoxClass" name="noofadults[]"> 
         <option selected>1</option> 
         <option>2</option> 
         <option>3</option> 
         <option>4</option> 
         <option>5</option> 
        </select> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="wh90percent textleft left"> <span class="opensans size13"><b>Child</b></span> 

        <div class="input-group"> <span class="input-group-btn"> 
                  <button type="button" class="btn-default btn-number minus" disabled="disabled" data-type="minus" data-field="quant1"> 
                   <span class="glyphicon glyphicon-minus"></span> 

         </button> 
         </span> 
         <input type="text" name="quant1" class="form-control input-number" value="0" min="0" max="5" style="text-align:center" disabled="disabled"> <span class="input-group-btn"> 
                  <button type="button" class="btn-default btn-number plus" data-type="plus" data-field="quant1"> 
                   <span class="glyphicon glyphicon-plus"></span> 

         </button> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="addchildage"></div> 
     <div class="addroom2 block grey" id="add1"> 
      <div class="w50percent3 left"> 
       <div class="child2"><a id='addButton1'>ADD</a> 

       </div> 
      </div> 
     </div> 
    </div> 

必需的JSON格式

{ 
"noofrooms": "4", 
"guests": [ 
    { 
     "adultcount": "1", 
     "childcount": "0", 
     "chidage": [] 
    }, 
    { 
     "adultcount": "1", 
     "childcount": "1", 
     "chidage": [ 
      "6" 
     ] 
    }, 
    { 
     "adultcount": "1", 
     "childcount": "2", 
     "chidage": [ 
      "6", 
      "8" 
     ] 
    }, 
    { 
     "adultcount": "1", 
     "childcount": "2", 
     "chidage": [ 
      "6", 
      "8" 
     ] 
    } 
] 
} 

其存储在一个字符串的Javascript

$('.btn-number').click(function (e) { 
e.preventDefault(); 

fieldName = $(this).attr('data-field'); 
type = $(this).attr('data-type'); 
var input = $("input[name='" + fieldName + "']"); 
var currentVal = parseInt(input.val()); 
if (!isNaN(currentVal)) { 
    if (type == 'minus') { 

     if (currentVal > input.attr('min')) { 
      input.val(currentVal - 1).change(); 
     } 
     if (parseInt(input.val()) == input.attr('min')) { 
      $(this).attr('disabled', true); 


     } 

    } else if (type == 'plus') { 

     if (currentVal < input.attr('max')) { 
      input.val(currentVal + 1).change(); 
     } 
     if (parseInt(input.val()) == input.attr('max')) { 
      $(this).attr('disabled', true); 
     } 

    } 
} else { 
    input.val(0); 

} 
}); 
$('.input-number').focusin(function() { 
$(this).data('oldValue', $(this).val()); 
}); 
$('.input-number').change(function() { 

minValue = parseInt($(this).attr('min')); 
maxValue = parseInt($(this).attr('max')); 
valueCurrent = parseInt($(this).val()); 

name = $(this).attr('name'); 
if (valueCurrent >= minValue) { 
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled') 
} else { 
    alert('Sorry, the minimum value was reached'); 
    $(this).val($(this).data('oldValue')); 
} 
if (valueCurrent <= maxValue) { 
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled') 
} else { 
    alert('Sorry, the maximum value was reached'); 
    $(this).val($(this).data('oldValue')); 
} 


}); 

$(function() { 
$('.plus').click(function (e) { 
    e.preventDefault(); 
    $('.addchildage').append('<select class="form-control" name="childage[]"><option></option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select>'); 
}); 
$('.minus').click(function (e) { 
    e.preventDefault(); 
    if ($('.addchildage select').length > 0) { 
     $('.addchildage').children().last().remove(); 
    } 
}); 

}) 

Answer 1

JSON你已指定无效。 请参考下面的示例

<html> 
    <head> 
     <script> 
      var sprint = [ 
       { 
        sprintId:1, 
        noOfProj:[] 
       }, 
       { 
        sprintId:2, 
        noOfProj:[] 
       } 
       , 
       { 
        sprintId:3, 
        noOfProj:[] 
       } 
      ]; 

      console.log(sprint); 

      sprint[0].noOfProj.push({"name":"abc"}); 
      sprint[0].noOfProj.push({"name":"def"}); 

      console.log(sprint); 

      sprint.forEach(function(entry){ 
       entry.noOfProj.forEach(function(sprints){ 
        console.log(sprints.name); 
       }) 
      }); 

     </script> 
    </head> 
    <body> 

    </body> 
</html> 

以上情况。我试图推动新的价值冲刺。按F12，去安慰标签来查看详细结果在浏览器中

Answer 2

var form = $(document.myform); 
var stringData = JSON.stringify(from.serializeArray()); 

查看已指定该reference