CODEWITHSUNDEEP
javascriptjqueryarraysobject
Furkan
Furkan

Reputation: 81

Pushing objects to an array only returns last object pushed

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>

Upvotes: 0

Views: 1632

Answers (2)

ibrahim mahrir
ibrahim mahrir

Reputation: 31682

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);
}

Upvotes: 3

Zakaria ASSANI
Zakaria ASSANI

Reputation: 286

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*/
}

Upvotes: 0

Related Questions