Tengo una página HTML con un formulario y una tabla . En un archivo js tengo una lista de objetos (JSON) y con esta lista completo la tabla cuando se carga la página.

El formulario debería permitirme agregar un elemento a la lista y luego mostrarlo como una nueva fila en la tabla.

Este es mi archivo js:

 var data = [ { "first_name": "John", "last_name": "Smith", "email": "john.smith@gmail.com", "job": "CEO", "agree": true }, { "first_name": "Marie", "last_name": "Curie", "email": "marie.curie@gmail.com", "job": "Researcher", "agree": true }]; populateTable(); function populateTable() { var out = "<table><tr>" + "<th>First Name</th><th>Last Name</th>" + "<th>Email</th>" + "<th>Job</th><th>Agree</th></tr>"; var i; for (i = 0; i < data.length; i++) { out += '<tr><td>' + data[i].first_name + '</td><td>' + data[i].last_name + '</td><td>' + data[i].email + '</td><td>' + data[i].job + '</td><td>' + data[i].agree + '</td></tr>'; } document.getElementById("showData").innerHTML = out; }; function collectData(){ var TestName = document.getElementById("fname").value; var TestSurname = document.getElementById("lname").value; var TestEmail = document.getElementById("email").value; var TestJob = document.getElementById("job").value; var TestAgree = document.getElementById("agree_terms").value; //insert this data on JSON file var jsonObject = { "first_name": TestName, "last_name": TestSurname, "email": TestEmail, "job": TestJob, "agree": TestAgree }; data.push(jsonObject); }

Traté de insertar el nuevo elemento en la lista pero, naturalmente, el código vuelve a cargar la función populateTable() sin tener en cuenta este nuevo elemento.

¿Cómo puedo resolverlo?