JSFiddle - React, Tailwind, and code Playground
HTML
<table id="table"></table>
JavaScript
const uri = 'https://frontend-test.netbox.ru/';
(async function(){
let resp = await fetch(uri)
let json = await resp.json()
json
.map(i => i.reduce((a, i) => (a[i.field.toLowerCase().replace('-','')] = i.value, a),{}))
.map(i => {
let {id, name, age, phone, email} = i
let tr = document.createElement('tr')
tr.innerHTML = `
<tr>
<td>${id}</td>
<td>${name}</td>
<td>${age}</td>
<td>${phone}</td>
<td>${email}</td>
<td><button edit>edit</button></td>
<td><button delete>delete</button></td>
</tr>`
let u = tr.querySelector('[edit]')
let d = tr.querySelector('[delete]')
u.addEventListener('click', e => update(id, name, age, phone, email))
d.addEventListener('click', e => remove(id, tr))
table.append(tr)
})
.join('')
})()
async function remove(id, tr){
let resp = await fetch(uri + '?method=delete&id=' + id)
alert('delete ' + await resp.text())
tr.remove()
}
async function update(id, name, age, phone, email){
let resp = await fetch(uri + `?method=update&id=${id}&name=${name}&age=${age}&phone=${phone}&email=${email}`)
alert('update ' + await resp.text())
}