ajax jsondata.object,jquery - Json data object in Ajax call - Stack Overflow

I have created 3 form elements. Each form contains 8 text fields. If I click the Submit button, the data I have entered in these text fields is converted into JSON format and finally posted into my database. I am using an AJAX post call. My code is:

8 text field code ...8 text field code ...8 text field code ...

$(document).ready(function() {

$("#ifbuttonclick").click(function(e) {

var jsonData = {};

var form1 = $("#xxx").serializeArray(); //get form1 data

var form2 = $("#yyy").serializeArray();

var form3 = $("#zzz").serializeArray();

var formData = {

"form1": form1,

"form2": form2,

"form3": form3

};

console.log(formData); // working fine

$.each(formData, function() {

if (jsonData[this.name]) { //**here shows JsonData is Undefined**

if (!jsonData[this.name].push) {

jsonData[this.name] = [jsonData[this.name]];

}

jsonData[this.name].push(this.value || '');

} else {

jsonData[this.name] = this.value || '';

}

});

console.log(jsonData);

$.ajax({

type: "POST",

beforeSend: function(request) {

request.setRequestHeader("Authorization", "xxxxxxxxxxxx");

},

url: "...mydburl....",

contentType: 'application/json',

dataType: 'json',

data: jsonData,

success: function(data, textStatus, jqXHR) {

$("#response").text("");

$("#response").append(data);

}

});

e.preventDefault();

})

})

Please correct my code. I want to know how to get 3 form's data into a single JSON object.If my approach wrong, please post any sample.How to achieve this?