使用从记录返回的json数据构建动态导航系统
使用从记录返回的json数据构建动态导航系统
提问于 2018-12-07 04:56:30
我决定使用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>这一切都没有问题。下面是我为动态构建它而构建的代码。我使用id's将数据追加到菜单的右侧。代码的第一次迭代运行良好，但是在接下来的迭代中，我找不到要将代码附加到的id。以下是代码。我只展示了构建无序列表的逻辑。
$(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
Stack Overflow用户
发布于 2018-12-07 22:54:21
我想通了。当我在记录中循环时，我首先比较年，然后是月，然后是日，然后从那里开始构建。下面是遍历数据的代码。
$(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
});
})
}) 正如您在每个if和else中看到的，如果我提高无序列表级别，并根据答案添加数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53659551
复制相关文章
相似问题
腾讯云开发者
