How to fill a table with array data?

How to make filling in the table?

<div class="table-wrap">
 <table id = 'test'>
the <tr>
<th>Name</th>
<th>last Name</th>
<th>Description</th>
 <th>eye Color</th>
</tr>
</table>
 </div>


Data:

[
{
 "id": "5c2286fb23e87be312d55d9a",
 "name": {
 "firstName": "Brooks",
 "lastName": "Stone"
},
 "phone": "+7 (843) 431-2190",
 "about": "Qui occaecat aliquip cillum esse voluptate adipisicing do laborum ea. Lorem dolor et Lorem pariatur exercitation reprehenderit voluptate. Culpa laborum culpa nisi sunt eu et nulla commodo aute aliqua cupidatat culpa. Eu officia dolor laboris enim mollit labore blame belongs blame belongs ex minim tempor magna dolor. Ipsum cillum officia irure amet enim voluptate consequat deserunt laborum nulla pariatur excepteur voluptate incididunt. In excepteur adipisicing elit occaecat dolor ea. Irure dolor quis cillum voluptate minim.",
 "eyeColor": "blue"
},
{
 "id": "5c2286fb7f4c26c63eff1b66",
 "name": {
 "firstName": "Johnston",
 "lastName": "Tate"
},
 "phone": "+7 (939) 409-2841",
 "about": "Eu ipsum in est exercitation voluptate fugiat occaecat fugiat ea ad veniam adipisicing elit ullamco. Laboris consectetur enim dolore sit amet exercitation non do reprehenderit non. Blame belongs anim voluptate consequat non sit non culpa occaecat adipisicing. Reprehenderit dolor cillum laboris incididunt quis esse exercitation ut in ad voluptate commodo in. Exercitation veniam adipisicing irure ut nulla qui.",
 "eyeColor": "brown"
},
]
March 25th 20 at 13:45
1 answer
March 25th 20 at 13:47
Solution
document.querySelector('#test tbody').innerHTML += data.map(n => `
the <tr>
<td>${n.name.firstName}</td>
<td>${n.name.lastName}</td>
<td>${n.about}</td>
<td>${n.eyeColor}</td>
</tr>
`).join(");

Find more questions by tags JavaScript