Нажатие объектов на массив возвращает только последний объект, нажатый

Question

Я знаю, что этот вопрос задан много раз, и я много исследовал, но не смог найти решение. Итак, у меня есть форма, и я получаю значения формы в массиве данных с помощью form.serializeArray(); И создаю объект obj с этим массивом. Мне нужно нажать каждый объект на новый массив personArray. Но нажатие объектов в этом массиве возвращает только последний объект. Как я могу решить эту проблему. Мне нужно хранить каждый новый объект, который приходит из формы в том, что 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

попробовать это!

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

Answer 2

Вы используете один и тот же объект, поэтому каждый раз, когда вы переопределяете уже выдвинутый объект и снова его подталкиваете. Поскольку объект - это просто ссылка на пространство в памяти, вы должны каждый раз создавать новый объект или вы будете в конечном итоге тем же самым объектом, который многократно нажал. Вот объяснение того, что происходит:

var arr = []; 
 

 
var o = {}; 
 

 
o["data"] = "hello"; 
 
arr.push(o); 
 

 
o["other"] = "world"; 
 
arr.push(o); 
 

 
console.log(arr);

Вот что вы должны сделать:

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