Построение динамической навигационной системы с использованием данных json, возвращаемых из записей
Я решил использовать Slicknav для создания динамической навигационной системы для серии записей для системы оповещения о пожаре. У меня есть эта система, встроенная в базу данных Lotus domino, и в этой базе данных у меня есть динамическая система расширяемых разделов по годам, месяцам и дням. Предположим, это повторяет эту навигацию в моем приложении. Посмотрев на разные плагины, я решил использовать slicknav. Вот тут-то и встает моя задача. Я должен построить эту систему на основе записей документов. Вот основа моей системы. Сначала вот образец возвращенных данных JSON:
{"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"}
]}
Вот код HTML и JQuery, который я построил для статического тестирования:
<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>
Это все работало без проблем. Вот код, который я построил, чтобы построить это динамически. Я использую идентификаторы, чтобы добавить данные на правильном уровне меню. Первая итерация в коде работает нормально, но затем я не могу найти идентификаторы для добавления кода в следующие итерации. Вот этот код. Я только показываю логику построения неупорядоченного списка.
$(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;
})
})
})
1 ответ
Я понял. Когда я перебираю записи, я сравниваю сначала год, затем месяц и день и строю их оттуда. Вот код для циклического прохождения данных.
$(function(){
$.ajax({
url:'../json/getfiredrills.php',
dataType: 'json'
}).done(function(data){
var $firedrillmainul=$("#firedrillmainul"),
alarmyear="",
alarmyearmonth="",
alarmyearmonthday="";
$firedrillmainul.empty();
if(data.hasOwnProperty("firedrills")){
$.each(data.firedrills,function(key,value){
if(alarmyear!=value.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>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
)
)
)
)
)
)
)
}else if(alarmyearmonth!=value.alarmyearmonth){
$("#"+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>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
)
)
)
)
)
}else if(alarmyearmonthday!==value.alarmyearmonthday){
$("#"+value.alarmyearmonth+"-ul").append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
$('<li>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
)
)
)
}else if(alarmyearmonthday==value.alarmyearmonthday){
$("#"+value.alarmyearmonthday+"-ul").append(
$('<li>').prop({id:value.inciNumber}).append($('<a>').prop({href:"#"}).text(value.incidentlocation))
)
}
alarmyear=value.alarmyear;
alarmyearmonth=value.alarmyearmonth;
alarmyearmonthday=value.alarmyearmonthday;
})
}
$firedrillmainul.slicknav({
label: 'Fire Drills',
prependTo:'#firedrillmainnavdiv',
duplicate: false
});
})
})
Как вы можете видеть на каждом шаге "если и еще", подниму ли я уровень неупорядоченного списка и добавлю данные, основанные на ответе.