将对象推送到数组仅返回最后推送的对象

Question

I know this question asked before many time and I have researched a lot but I couldn't find the solution. So, I have an form and I am getting the form values to data array with form.serializeArray(); And I create an object obj with this array. I need to push every object to new array personArray . But pushing objects in this array only returns last object pushed. How can I solve this problem. I need to store every new object which comes from form in that personArray

 var obj = {}; var data, i; var personArray = []; var pageArray = []; $("#submitButton").click(function() { addButton(); // addTable(); // pagination(); // resetForm(''); }); /*Formdaki verileri objeye aktarır, objeyi array'a aktarır*/ function addButton() { data = $('#personForm').serializeArray(); for (i = 0; i < data.length; i++) { obj[data[i].name] = data[i].value; } personArray.push(obj); console.log(personArray); /*Datayı array'e aktarır*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <form id="personForm"> <div> <label for="firstname">İsim:</label> <input type="text" id="firstname" name="firstname" value="" placeholder="İsim" /> </div> <div> <label for="lastname">Soyisim:</label> <input type="text" id="lastname" name="lastname" value="" placeholder="Soyisim" /> </div> <div> <label for="tc">TC:</label> <input type="tel" id="tc" name="tc" value="" placeholder="TC Kimlik No" /> </div> <div> <label for="birthday">Doğum T:</label> <input type="date" id="birthday" name="birthday" /> </div> <div> <input type="button" value="Kaydet" id="submitButton" /> </div> </form> 

Answer 1

You are using the same object, so every time you are overiding the already pushed object and re-push it again. Since object are just a reference to a space in memory, you have to create a new object each time or you'll only end up with the same object pushed many times. Here is an explanation of what is happening:

 var arr = []; var o = {}; o["data"] = "hello"; arr.push(o); o["other"] = "world"; arr.push(o); console.log(arr); 

Here is what you should do:

var hash = {}; // the hash object
var data, i;
var personArray = [];
var pageArray = [];

$("#submitButton").click(function() {
  addButton();
  // addTable();
  // pagination();
  // resetForm('');
});

function addButton() {
  var obj = {}; // create a brand new object every time
  data = $('#personForm').serializeArray();
  for (i = 0; i < data.length; i++) {
    obj[data[i].name] = data[i].value;
    hash[data[i].name] = data[i].value; // assign to the hash object
  }

  personArray.push(obj);
  console.log(personArray);
}

Answer 2

try This !

var data, i;
var personArray = [];
var pageArray = [];

$("#submitButton").click(function() {
  addButton();
  // addTable();
  // pagination();
  // resetForm('');
});

/*Formdaki verileri objeye aktarır, objeyi array'a aktarır*/
function addButton() {
   var obj = {};
  data = $('#personForm').serializeArray();
  for (i = 0; i < data.length; i++) {
    obj[data[i].name] = data[i].value;
  }

  personArray.push(obj);
  console.log(personArray);
  /*Datayı array'e aktarır*/
}