I updated my question:

I have 2 objects(from user inputs)

a = {id:1, name:'a', age:10, country:''};
b = {id:2, name:'b', age:14, country:'Malaysia'}

I will need to always fill the 'a' object into my html table if the object key is match with table td's id; also if 'a' have empty value, 'b' will need to replace it, finally I will need to get the result：

result = {id:1, name:'a', age:10, country:'Malaysia'}

But I merge 2 object become:

[{id:1, name:'a', age:10, country:''},{id:2, name:'b', age:14, country:'Malaysia'}]

And I wish to group the values with same key become:

[{id:[1,2], name:['a','b'], age:[10,14], country:['Malaysia']}]

Now I stuck here, I tried .map & .reduce, but not success.

I am thinking to fill first value from each array to my html table if the array key is match with my table td's id. And my key is generate from database, so cannot hardcode inside the code. I will display the key and value in my html table:

<table>
<tr>
<td id='id'>id</td>
<td>1</td>
</tr>
<tr>
<td id='name'>name</td>
<td>a</td>
</tr>
<tr>
<td id='age'>age</td>
<td>10</td>
</tr>
<tr>
<td id='country'>country</td>
<td>Malaysia</td>
</tr>
</table>

Apologize my english is bad