• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Szerkesztve: 2024
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

Ebben a leírásban nincsennek nyomógombok és törlőgombok renderelve.

      <table class="table">
        <thead>
            <tr>
                <th>Név</th>
                <th>Település</th>
                <th>Fizetés</th>
            </tr>
        </thead>
        <tbody id="empsbody">          
        </tbody>
    </table>
 
    <!-- ... -->
 
    <script type="module" src="app.js"></script>

apiService.js

const url = 'http://localhost:8000/employees';
 
async function getEmployees() {
    try {
        let response = await fetch(url);
        let result = await response.json();
        return result;
    }catch (err) {
        console.log('Hiba! A dolgozók lekérése sikertelen!');
        console.log(err);
    }   
}
 
export { getEmployees }

app.js

import { getEmployees } from "./apiService.js";
 
const doc = {
    empsbody: document.querySelector('#empsbody')
}
 
const state = {
    emps: []
}
 
async function getEmps() {
    state.emps = await getEmployees();
    renderTable()
}
 
window.addEventListener('load', () => {
    init()
})
 
function init() {
    getEmps()
}
 
function renderTable() {
    state.emps.forEach(emp => {
        const row = document.createElement('tr')
        row.innerHTML = `
            <td>${emp.name}</td>
            <td>${emp.city}</td>
            <td>${emp.salary}</td>
        `
        doc.empsbody.appendChild(row)
    })
}