Update a obj list in js with a form and show it in HTML page-CodePudding

I have a HTML page with a form and a table. In a js file I have a list of objects (JSON) and with this list I populate the table when the page loads.

The form should allow me to add an element to the list and then display it as a new row in the table.

This is my js file:

var data = [
    {
        "first_name": "John",
        "last_name": "Smith",
        "email": "[email protected]",
        "job": "CEO",
        "agree": true
    },
    {
        "first_name": "Marie",
        "last_name": "Curie",
        "email": "[email protected]",
        "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);
}

I tried to push the new element on the list but naturally the code reload the function populateTable() without considering this new element.

Ho can I resolve it?

CodePudding user response：

Add populateTable to the end of the function

var data = [
    {
        "first_name": "John",
        "last_name": "Smith",
        "email": "[email protected]",
        "job": "CEO",
        "agree": true
    },
    {
        "first_name": "Marie",
        "last_name": "Curie",
        "email": "[email protected]",
        "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 = "Demo";
    var TestSurname = "Demo";
    var TestEmail = "Demo";
    var TestJob = "Demo";
    var TestAgree = "Demo";
    
    //insert this data on JSON file
    var jsonObject = {
        "first_name": TestName, 
        "last_name": TestSurname,
        "email": TestEmail,
        "job": TestJob,
        "agree": TestAgree
    };
    data.push(jsonObject);
    populateTable();
    console.log("Click");
}

<div id="showData">

</div>
<button onclick="collectData()">
Add Demo Data
</button>