I would like to remove the jquery from here and do it with simple javascript. How can I do that? Or how could I do that but in a simpler and better way?
<script>
let serverData = {
'server1': [],
'server2': [],
'server3': [],
};
const body = $('body');
function displayInTable(server) {
if(serverData[server]) {
const serverTable = $(`tbody#${server}`);
serverTable.html('');
serverData[server].forEach((user) => {
serverTable.append('<tr><td>'+user.id+'</td><td>'+user.nume+'</td><td>'+user.autor+'</td><td>'+user.album+'</td><td>'+user.gen+'</td><td>'+user.an+'</td></tr>');
})
}
}
async function firstFetch() {
const request = await fetch('ajax/colectareDate.php');
const response = await request.json();
if(response) {
Object.keys(response).forEach((server) => {
serverData[server] = response[server]
displayInTable(server)
})
}
}
[13:35]
body.on('submit', '#mainForm', async function(e) {
e.preventDefault();
const request = await fetch('ajax/inserareDate.php?'+$(this).serialize());
const server = 'server1';
serverData[server] = await request.json();
displayInTable(server);
});
body.on('click', '.syncButton', async function() {
const from = $(this).attr('data-from');
const to = $(this).attr('data-to');
const request = await fetch('ajax/sincronizare.php?from='+from+'&to='+to);
serverData[to] = await request.json();
displayInTable(to);
});
</script>