Append <ul> and <li> in recursive loop
- by Batman
I have a site collection. I was told I need a recursive loop to do this.
This is what I've tried:
When the site loads, call getSiteTree() which passes the top level website to my getSubSite() function. From there I check if there are any subsites. I have a boolean but I'm not really using it for anything yet, I've just seen it used before for this type of work. Anyways, from there I check if there are any sub sits, if not I log the end of the branch, if there are, I call the function again using the new url and repeat the process. Looking at my console, it seems to work as intended.
function getSiteTree(){
var tree = $('#treeviewList');
var rootsite = window.location.protocol + "//" + window.location.hostname;
var siteEnd = false;
getSubSite(rootsite);
}
function getSubSite(url){
$().SPServices({
operation: "GetWebCollection",
webURL: url,
async: true,
completefunc: function(xData, Status) {
var siteUrl;
var siteCount = $(xData.responseXML).find("Web").length;
if(siteCount == 0){
console.log("end of branch");
siteEnd = true;
}else{
$(xData.responseXML).find("Web").each(function() {
siteUrl = $(this).attr("Url");
console.log(siteUrl);
getSubSite(siteUrl);
});
}
}
});
}
My questions: now that I have my sites, I need to take those sites and create something like this but I'm not sure how to accomplish this.
<li>Site 1
<ul>
<li>sub 1.1</li>
<li>sub 1.2</li>
<li>sub 1.3</li>
<ul>
<li>1.3.1</li>
</ul>
<li>sub 1.4</li>
<li>sub 1.5</li>
</ul>
</li>
<li>Site 2
<ul>
<li>sub 2.1</li>
<li>sub 2.2</li>
<li>sub 2.3</li>
<ul>
<li>2.3.1</li>
<li>2.3.2</li>
</ul>
</ul>
</li>
</ul>
I have this inital html:
<div id="treeviewDiv" style="width:200px;height:150px;overflow:scroll">
<ui id="treeviewList"></ui>
</div>
