Рефакторинг кода JS

Делаю динамический поиск, т.е. добавляю и удаляю элементы (в таблице) на лету. Можно ли как-то сократить код? data_parse - ассоциативный массив, полученный из сервера.
let data_parse = JSON.parse(data); console.log(JSON.parse(data));
$('#listDataEmployee').remove(); let el_tbody = document.createElement('tbody');
for (let i = 0; i < data_parse.length; i++) { let tagTrDataEmployee = document.createElement('tr');
let tagTd_id = document.createElement('td'); tagTd_id.innerHTML = data_parse[i]['id']; tagTrDataEmployee.append(tagTd_id);
let tagTd_email = document.createElement('td'); tagTd_email.innerHTML = data_parse[i]['email']; tagTrDataEmployee.append(tagTd_email);
let tagTd_fio = document.createElement('td'); tagTd_fio.innerHTML = data_parse[i]['FIO']; tagTrDataEmployee.append(tagTd_fio);
let tagTd_phone = document.createElement('td'); tagTd_phone.innerHTML = data_parse[i]['phone']; tagTrDataEmployee.append(tagTd_phone);
let tagTd_role = document.createElement('td'); tagTd_role.innerHTML = data_parse[i]['role']; tagTrDataEmployee.append(tagTd_fio);
el_tbody.append(tagTrDataEmployee); } $('.listNewDataEmployee').append(el_tbody);

Ответ

Полагаю, на самом деле ты хочешь что-то такое:
var data = `[ {"id": 1, "email": "first@mail.ru", "FIO":"First Firstov", "phone": "+7 (111) 111 11 11", "role": "admin"}, {"id": 2, "email": "second@mail.ru", "FIO":"Second Secondov", "phone":"+7 (222) 222 22 22", "role": "user"}, {"id": 3, "email": "xss@mail.ru", "FIO":"", "phone":"+7 (333) 333 33 33", "role": "test"} ]`; data = JSON.parse(data); $('#listDataEmployee').replaceWith( data.map(d => $("").append([ $("").text(d.id), $("").text(d.email), $("").text(d.FIO), $("").text(d.phone), $("").text(d.role), ]))); table, tr, td, th { border-collapse: collapse; border: 1px solid; }

ID	Email	FIO	Phone	Role