Adding values to an object javascript

Question

I have this object:

var tableData = [
    { value1: 1, value2: "Something", value3: 10 },
    { value1: 2, value2: "Something else", value3: 12 }
];

and I have 3 inputs, when I click button add I want to add input fileds to this object to look like this:

var tableData = [
    { value1: 1, value2: "Something", value3: 10 },
    { value1: 2, value2: "Something else", value3: 12 }
    { value1: 3, value2: "Something new else", value3: 5 } // new input
];

I know that I have to do something with:

buttonAdd.addEventListener("click", function() {
    alert("clicked");
    // something here
});

Html:

<input id="value1" type="text">
<input id="value2" type="text">
<input id="value3" type="text">
<button id="add" type="button">Add</button>

<div>
    <table>
       <thead>
          <tr>
             th>value1</th>
             <th>value2</th>
             <th>value3</th>
          </tr>
       </thead>

       <tbody id="tableData">

       </tbody>
    </table>
</div>

Thanks in advance.

Answer 1

tableData isn't an object, it's an array (which I suppose is also an object, but not in the sense you're thinking of). Adding anything to it is as simple as using push .

buttonAdd.addEventListener("click", function() {
    alert("clicked");
    tableData.push( {'value1': 3, 'value2': "Something new else", 'value3': 5} );
});

Answer 2

Using Array Push you can achieve it

 buttonAdd.addEventListener("click", function() {
        var tableData = [
            { value1: 1, value2: "Something", value3: 10 },
            { value1: 2, value2: "Something else", value3: 12 }
        ];

        tableDataObject={ value1: 3, value2: "Something new else", value3: 5 }
        tableData.push(tableDataObject);

        console.log(tableData);

    }