এই মডিউলে আমরা API থেকে ডেজিগনেশন ও স্পেশালাইজেশন ডেটা লোড করব .
এর জন্য অবশ্য আমাদের প্রজেক্টের ব্যাক-এন্ড পার্টে তৈরি করা API-এর সাহায্য নিতে হবে ।
এর জন্য app.js ফাইলে loadDesignation( ) ও loadSpecialization( ) নামক ২ টি ফাঙ্গশন লিখে ফেলি-
...
...
...
const loadDesignation = () => {
fetch("https://testing-8az5.onrender.com/doctor/designation/")
.then((res) => res.json())
.then((data) => {
data.forEach((item) => {
const parent = document.getElementById("drop-deg");
const li = document.createElement("li");
li.classList.add("dropdown-item");
li.innerText = item?.name;
parent.appendChild(li);
});
});
};
const loadSpecialization = () => {
fetch("https://testing-8az5.onrender.com/doctor/specialization/")
.then((res) => res.json())
.then((data) => {
data.forEach((item) => {
const parent = document.getElementById("drop-spe");
const li = document.createElement("li");
li.classList.add("dropdown-item");
li.innerHTML = `
<li onclick="loadDoctors('${item.name}')"> ${item.name}</li>
`;
parent.appendChild(li);
});
});
};
...
...
...
loadDesignation();
loadSpecialization();
এখন প্রজেক্ট রান করলে API থেকে লোড হওয়া Designation ও Specialization সমুহ দেখতে পাব-