Formatting JavaScript Object from HTML Form using serializeJSON

Question

I am having some issues getting the data out of my HTML form and into the proper JSON format that is required by the server that I'm sending to. I've tried following along this guide I found for extracting the data and formatting as JavaScript Object, but I cannot get the output to match what I'll need to send off.

I have been able to get the question key that I need, along with it's proper value, but have been unable to add the proper labeling.

Current Output:

{"Question1":"Yes",
"Question2":"No",
"Question3":"1",
"Question4":"Female"}

Required Output:

{
"Key":"Question1",
"Value":"Yes"
 }, {
"Key":"Question2",
"Value":"No"
 }, {
"Key":"Question1",
"Value":"No"
 }, {
 "Key":"Question4",
 "Value":"Female"
 }

(I included the script for the serializeJSON plugin to get the snippet to work)

$(function(){
var $select = $(".1-100");
for (i=1;i<=100;i++){
    $select.append($('<option></option>').val(i).html(i))
 }
});	

function submitForm () { 


var result = [];
$.each($('form').serializeArray(), function(i,field){
result.push({"Key": field.name, "Value":field.value})
 
});
  
var formData = JSON.stringify($(result));	
	console.log(formData);
};
  
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="survey" method="post">
	<div class="form-group">
 	<div class="col-sm-3 selectContainer">
		
	 <label class="control-label" >First Question</label>
  		<select class="form-control" name="QuestionKey1">
    		<option name="Value" value="Yes" selected>Yes</option>
    		<option name="Value" value="No">No</option>
  		</select>
	</div>	
		
	<div class="col-sm-3 selectContainer">	
  		<label class="control-label">Second Question</label>
  			<select class="form-control" name="QuestionKey2">
    			<option name="Value" value="Yes">Yes</option>
    			<option name="Value" value="No" selected>No</option>
 			 </select>
		</div>
				
	<div class="col-sm-2 selectContainer">
		  <label class="control-label">Third Question</label>	
			<select class="form-control 1-100" id="age" name="QuestionKey3"></select>
    </div>
		
		<div class="col-sm-2">
		 <label class="control-label">Fourth Question</label>	
			 <label class="radio-inline">
			 	<input type="radio" name="QuestionKey4" value="Female" />Female
			  </label>
			  <label class="radio-inline">
				 <input type="radio" name="QuestionKey4" value="Male" />Male
			  </label>	
		
		</div>	
		</div>				
	<input value="Submit" type="button" onclick="submitForm()">	
</form>

Any tips or advice would be greatly appreciated. Thank you.

Edit - After following one of the examples sent I am ending up with my output looking like this:

{"0":{"Key":"QuestionKey1","Value":"Yes"},"1": 
{"Key":"QuestionKey2","Value":"No"},"2": 
{"Key":"QuestionKey3","Value":"1"},"3": 
{"Key":"QuestionKey4","Value":"Male"},"length":4}

I've also modified my snippet to reflect the changes that got me to this point.

Answer 1

Try something like this: (no need for that plugin), using http://api.jquery.com/serializeArray/

var result = [];    
$.each($('form').serializeArray(), function(i, field){
    result.push({"Key": field.name, "Value":field.value})
});

finally call JSON.stringify if you need it in string format