১৭-৮ : API থেকে ডেজিগনেশন ও স্পেশালাইজেশন ডেটা লোড করা

এই মডিউলে আমরা API থেকে ডেজিগনেশন ও স্পেশালাইজেশন ডেটা লোড করব .

এর জন্য অবশ্য আমাদের প্রজেক্টের ব্যাক-এন্ড পার্টে তৈরি করা API-এর সাহায্য নিতে হবে ।

Designation API Link:

https://testing-8az5.onrender.com/doctor/designation/testing-8az5.onrender.com

Specialization API Link:

https://testing-8az5.onrender.com/doctor/specialization/testing-8az5.onrender.com

এর জন্য app.js ফাইলে loadDesignation( ) ও loadSpecialization( ) নামক ২ টি ফাঙ্গশন লিখে ফেলি-

Code:: 17.8.1 app.js

...
...
...
    
  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 সমুহ দেখতে পাব-