Не большое api, получение данных из файла json

1)Есть файл json в корне сайта, необходимо получить эти данные и вывести их по категориям
2) Сделать вёрстку
3) Разработка формы записи к врачу

Сайт сделан на системе управления WP

1) Код js запрашивающий и обрабатывающий данный с файла json:
_Api = async (id) => {
fetch('https://xn--29-6kchjik8boavp9lobe.xn--p1ai/vraj...)
.then(response => response.json())
.then(json =>
Object.values(json.vrachi).map((el) => {

if (el.id === +id ) {

el.items.map( (e) => { createCardHandler(e.name, e.title, e.stage, e.imgSrc, e.gender)} )

}
})
)
};

function createCardHandler(name, title, stage, imgSrc, gender) {
const card = document.createElement("li");
card.classList.add("b-vrachi__listItem");

const elImgB = document.createElement("div");
elImgB.classList.add("text__img");
card.append(elImgB);

const elTextB = document.createElement("div");
elTextB.classList.add("text__block");
card.append(elTextB)

const imgV = document.createElement("img");

if (imgSrc === '') {
if (gender === 'M') {
imgV.setAttribute("src", "/wp-content/themes/zs/img/man-doc.png")
} else {
imgV.setAttribute("src", "/wp-content/themes/zs/img/woman-doc.png")
}
} else {
imgV.setAttribute("src", imgSrc)
}

elImgB.append(imgV)

const zag = document.createElement("h4");
zag.innerHTML = name;
elTextB.append(zag);

if (title !== "" ) {
const p1 = document.createElement("p");
p1.classList.add("prev__text");
elTextB.append(p1);
}

if (stage !== "") {
const p2 = document.createElement("p");
p2.classList.add("staje__text");
p2.innerHTML = `Стаж более ${stage} лет`;
elTextB.append(p2);

}
document.querySelector(".b-vrachi__listItems").append(card);

}

function getResource (id) {
document.querySelector(".b-vrachi__listItems").innerHTML = `<div class="lds-heart"><div></div></div>`;
setTimeout(() => {
document.querySelector(".b-vrachi__listItems").innerHTML = "";
_Api(id);
}, 1500)

}

window.onload = function () {
getResource("1");

let col = document.querySelectorAll(".b-vrachi__leftMenuItem");

for (let uu of col ) {
uu.addEventListener("click", (e) => {
let id = e.target.dataset.id
document.querySelector(".b-vrachi__leftMenu ul .active").classList.remove("active");
e.target.classList.add("active");

getResource(id)
})
}

}

2) вёрстка сайт

3) Разработана форма записи к врачу. Поля специалист и врач связаны. При выборе специалиста - идет поиск подходящего врача в поле врач