# Creating an HTML table from an array of objects

Let's say we have some array of objects, for example, here's an array of users:

`let users = [ { name: 'name1', surname: 'surname1', patronymic: 'patronymic1' }, { name: 'name2', surname: 'surname2', patronymic: 'patronymic2' }, { name: 'name3', surname: 'surname3', patronymic: 'patronymic3' }, ];`

Let's make a HTML table from this array, in each row we will write the data of an individual user.

With this data storage structure, they usually run one loop through the array and create each cell of the table manually, like this:

`<table id="table"></table>` `let table = document.getElementById('table'); for (let user of users) { let tr = document.createElement('tr'); let td1 = document.createElement('td'); td1.textContent = user.name; tr.appendChild(td1); let td2 = document.createElement('td'); td2.textContent = user.surname; tr.appendChild(td2); let td3 = document.createElement('td'); td3.textContent = user.patronymic; tr.appendChild(td3); table.appendChild(tr); }`

This approach gives great flexibility - we ourselves can regulate the order of the data in the table cells (we can, for example, swap the first and last names).

In addition, if desired, we can hang events on certain cells. For example, you can attach some kind of action on click to the cell with the last name, and so on.

Given the following array with employees:

`` `let employees = [ {name: 'employee1', age: 30, salary: 400}, {name: 'employee2', age: 31, salary: 500}, {name: 'employee3', age: 32, salary: 600}, ];`

Output this array elements as an HTML table.

Modify the previous task so that when you click on any cell with an age, its content increases by `1`.

Modify the previous task so that when you click on any cell with a salary, its content increases by `10%`.

← →
↑
en ru