Javascript bekletme sorunu
Öncelikle merhaba bir sorunum var ama bür türlü çözemedim Php ile bir çok örneği var sınırsız alt kategorinin ben Gökhan Kandemir (kablosuzkedi) paylaştığı videodan bakarak bunu javascripte geçirdim.
Burdan videoya ulaşabilirsiniz
Ordaki json verisini elde ettim kod şu şekilde çalıştı.
function drawElements(items){
document.write("<ul>");
items.forEach(item => {
document.write("<li>" + item.baslik + "</li>");
if (item.children.length > 0) {
drawElements(item.children);
}
});
document.write("</ul>");
}
JSON formatı:
const menu_bilgisi = [
{
"baslik":"Anasayfa",
"children":[]
},
{
"baslik":"Dersler",
"children":[
{
"baslik":"Php",
"children":[
{
"baslik":"Seviye: Başlangıç",
"children":[
{
"baslik":"Anlatım: echo",
"children":[]
},
{
"baslik":"Anlatım: print",
"children":[]
},
{
"baslik":"Anlatım: print_r",
"children":[
{
"baslik":"print_r: Kullanım Amacı",
"children":[]
}
]
}
]
},
{
"baslik":"Seviye: Orta",
"children":[]
},
{
"baslik":"Seviye: İleri",
"children":[]
}
]
},
{
"baslik":"Javascript",
"children":[]
},
{
"baslik":"Css",
"children":[]
},
{
"baslik":"Html",
"children":[]
}
]
},
{
"baslik":"Hakkımda",
"children":[]
},
{
"baslik":"İletişim",
"children":[]
}
];
Ama tabiki document.write kullanıdığım için diğer herşey sayfada silindi.
Bunu body.innerHTML ile denedim ama javascript asenkron çalışan bir dil olduğu forEach'i beklemedi.
Onun için ne yapabilirim forEach'i acaba promise ile beklete bilirmiyim?
Ben onuda denedim ama sanırım ben yapamadım ama promise ile bekletilebilir diye düşünüyorum.
Allah Rızası için şunu bekletin.
Şimdiden teşekkürler...
Dostlar cevabı buldum json verisi aynı function şu şekilde.
function drawElements(items, elem = false) {
const body = document.querySelector("body");
let ul = document.createElement("ul");
if (elem == false) {
items.forEach(async (item) => {
let li = document.createElement("li");
li.innerText = item.baslik;
if (item.children.length > 0) {
drawElements(item.children, li);
}
ul.appendChild(li);
});
body.appendChild(ul);
} else {
items.forEach(async (item) => {
let li = document.createElement("li");
li.innerText = item.baslik;
if (item.children.length > 0) {
await drawElements(item.children, li);
}
ul.appendChild(li);
elem.appendChild(ul);
});
}
}