I have decided to use slicknav to build a dynamic navigation system for a series of records for a fire alarm incident system. I have this system built in Lotus domino database and in this database I have a dynamic system of expandable sections by year, month and day. This is suppose replicate that navigation this in my application. After looking at different plugins I have decided to use slicknav. This is where my challenge comes in. I have to build this system from the records of the documents. Here is the base of my system. First here is the sample of my json data returned:
{"firedrills":
[
{"alarmyear":2018,
"alarmyearmonth":"2018-9",
"alarmyearmonthday":"2018-9-18",
"monthname":"September",
"alarmday":"18",
"alarmdatetime":"2018-09-18 00:15:00.000",
"inciNumber":"2018-599",
"incidentlocation":"FR2W"},
{"alarmyear":2018,
"alarmyearmonth":"2018-8",
"alarmyearmonthday":"2018-8-7",
"monthname":"August",
"alarmday":"7",
"alarmdatetime":"2018-08-07 19:08:00.000",
"inciNumber":"2018-537",
"incidentlocation":"Laundry"},
{"alarmyear":2018,
"alarmyearmonth":"2018-7",
"alarmyearmonthday":"2018-7-3",
"monthname":"July",
"alarmday":"3",
"alarmdatetime":"2018-07-03 08:15:00.000",
"inciNumber":"2018-464",
"incidentlocation":"FA5E"}
]}
Here is the html and jquery code I built to test statically:
<div id="firedrillmainnavdiv">
<ul id="firedrillmainul"></ul>
</div>
<script type="text/javascript">
$(function(){
$.ajax({
url:'../json/getfiredrills.php',
dataType: 'json'
}).done(function(data){
var $firedrillmainul=$("#firedrillmainul");
$firedrillmainul.empty();
$firedrillmainul.append(
$('<li>').prop({id:"2018"}).text("2018").append(
$('<ul>').prop({id:"2018-ul"}).append(
$('<li>').prop({id:"2018-9"}).text("September").append(
$('<ul>').prop({id:"2018-9-ul"}).append(
$('<li>').prop({id:"2018-9-18"}).text("18").append(
$('<ul>').prop({id:"2018-9-18-ul"}).append(
$('<li>').prop({id:"2018-599"}).append($('<a>').prop({href:"#"}).text("FR2W"))
)
)
)
)
).append(
$('<li>').prop({id:"2018-8"}).text("August").append(
$('<ul>').prop({id:"2018-8-ul"}).append(
$('<li>').prop({id:"2018-8-7"}).text("7").append(
$('<ul>').prop({id:"2018-8-7-ul"}).append(
$('<li>').prop({id:"2018-537"}).append($('<a>').prop({href:"#"}).text("Laundry"))
)
)
)
)
).append(
$('<li>').prop({id:"2018-7"}).text("July").append(
$('<ul>').prop({id:"2018-7-ul"}).append(
$('<li>').prop({id:"2018-7-3"}).text("3").append(
$('<ul>').prop({id:"2018-7-3-ul"}).append(
$('<li>').prop({id:"2018-464"}).append($('<a>').prop({href:"#"}).text("FA5E"))
)
)
)
)
)
)
)
$firedrillmainul.slicknav({
label: 'Fire Drills',
prependTo:'#firedrillmainnavdiv',
duplicate: false
});
})
})
</script>
This all worked with no problem. Here is the code I built to build this dynamically. I am using the id's to append the data at the right level of the menu. The first iteration through the code works fine but then I cannot find the id's to append the code to on the following iterations. Here is that code. I am only showing the logic of building the unordered list.
$(function(){
$.ajax({
url:'../json/getfiredrills.php',
dataType: 'json'
}).done(function(data){
var $firedrillmainul=$("#firedrillmainul"),
alarmyear="";
$firedrillmainul.empty();
$.each(data.firedrills,function(key,value){
if (alarmyear==""){
$firedrillmainul.append(
$('<li>').prop({id:value.alarmyear}).text(value.alarmyear).append(
$('<ul>').prop({id:value.alarmyear+'-ul'}).append(
$('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
$('<ul>').prop({id:value.alarmyearmonth+'-ul'}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+'-ul'}).append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
)
)
)
)
)
)
}else if($firedrillmainul.find("#"+value.alarmyearmonthday)){
$("#"+value.alarmyearmonthday+"-ul").append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
}else if($firedrillmainul.find("#"+value.alarmyearmonth)){
$('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
)
)
}else if($firedrillmainul.find("#"+value.alarmyear)){
$("#"+value.alarmyear+"-ul").append(
$('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
$('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
)
)
)
)
}
alarmyear=value.alarmyear;
})
})
})
I figured it out. As I loop through the records I compare first the year, then month then day and build out from there. Here is the code to loop through the data.
As you can see at each if and else if I step up the unordered list level and add the data based on the answer.