DonerKebab/callback-demo.html Secret

## callback-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Using callback</title>
</head>
<body>
    <h3>Employee list</h3>
    <div id = 'employee'>

    </div>

</body>


<script>

    let loadEmployee = (callback) => {
        /*
        Gọi lên api lấy danh sách nhân viên,
        anh dùng hàm `fetch` là một function có sẵn của js để lấy dữ liệu từ API
        sau khi lấy được dữ liệu sẽ gọi đến callback function và truyển dữ liệu lấy
        được từ API vào function này.
        */

        fetch("https://employee.free.beeceptor.com/employee").then((resp) => resp.json()).then((data) => {
            console.log(data);
            callback(data);
        })
    }


    // hien thi department len html
    let representData = (employeeArray) => {
        let infoEmployee = "<table>"
        for (let i = 0; i < employeeArray.length; i++) {
            infoEmployee += `<tr><td> ${employeeArray[i].id}</td>
                                <td> ${employeeArray[i].name}</td>
                                <td> ${employeeArray[i].department}</td>
                                <td> ${employeeArray[i].age}</td>
                                </tr>`
        }
        infoEmployee += "</table>"
        document.getElementById("employee").innerHTML = infoEmployee;
    }

    // khi gọi đến function loadEmployee ta cần truyển một tham số - ở đây là function representData
    // để sau khi lấy được dữ liệu từ API sẽ hiển thị dữ liệu này lên .
    loadEmployee(representData);
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Using callback</title>
	</head>
	<body>
	<h3>Employee list</h3>
	<div id = 'employee'>

	</div>

	</body>




	<script>

	let loadEmployee = (callback) => {
	/*
	Gọi lên api lấy danh sách nhân viên,
	anh dùng hàm `fetch` là một function có sẵn của js để lấy dữ liệu từ API
	sau khi lấy được dữ liệu sẽ gọi đến callback function và truyển dữ liệu lấy
	được từ API vào function này.
	*/

	fetch("https://employee.free.beeceptor.com/employee").then((resp) => resp.json()).then((data) => {
	console.log(data);
	callback(data);
	})
	}



	// hien thi department len html
	let representData = (employeeArray) => {
	let infoEmployee = "<table>"
	for (let i = 0; i < employeeArray.length; i++) {
	infoEmployee += `<tr><td> ${employeeArray[i].id}</td>
	<td> ${employeeArray[i].name}</td>
	<td> ${employeeArray[i].department}</td>
	<td> ${employeeArray[i].age}</td>
	</tr>`
	}
	infoEmployee += "</table>"
	document.getElementById("employee").innerHTML = infoEmployee;
	}

	// khi gọi đến function loadEmployee ta cần truyển một tham số - ở đây là function representData
	// để sau khi lấy được dữ liệu từ API sẽ hiển thị dữ liệu này lên .
	loadEmployee(representData);
	</script>
	</html>