javascript - 如何在 ajax html() 中获取子数组
问题描述
我有一个表格供我的数据数组打印以供查看,html()
并且每个数据都有子数组,我也需要在我的数据中获取这些子数组的html()
数据
截图
my data
how it will look
# 代码
HTML
<div class="answerPanel"></div>
<button id="clicks" class="btn btn-primary">Begin</button>
Script
var index = 0;
$("#clicks").click(function(){
// timer function
function timer(seconds, countdownTimer, callback) {
var days = Math.floor(seconds / 24 / 60 / 60);
var hoursLeft = Math.floor((seconds) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Times Up!";
$("#clicks").attr("disabled", true);
$('.answerPanel').html('<div class="text-center text-danger">OH NO! <br> Times Up!</div>');
} else {
seconds--;
}
//Pass seconds param back to the caller.
callback(seconds);
}
//We pass the countdownTimer param into the timer function as well.
var countdownTimer = null,
seconds = data.quizzes[index].quiz_time;
countdownTimer = setInterval(function() {
timer(seconds, countdownTimer, function(_seconds){
seconds = _seconds;
})
}, 1000);
// printing function
if(typeof data.quizzes[index] != 'undefined'){
var row = `<form>
<div class="row">
<div class="col-md-12">
<div class="pull-left questionTitle">
${data.quizzes[index].question}
</div>
<div class="pull-right" id="countdown"></div>
</div>
<div class="col-md-12">
Choice 1
</div>
<div class="col-md-12">
Choice 2
</div>
<div class="col-md-12">
Choice (etc.)
</div>
</div>
</form>`;
$('.answerPanel').html(row);
index++;
}
if(data.quizzes.length > index+1) {
$("#clicks").html("Next");
}
if(data.quizzes.length === index) {
$("#clicks").html("Finish");
}
//end of printing function
});
任何想法?
解决方案
请在下面查看我的代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="banner">
<ul id="eventCal">
</ul>
<button id="clicks">Click</button>
<script type="text/javascript">
jQuery(document).ready(function($){
var quizzes = [{title:'title1',choices:[{choice:'choice1'},{choice:'choice2'}]},
{title:'title2',choices:[{choice:'new1'},{choice:'new2'}]},
{title:'title3',choices:[{choice:'demo1'},{choice:'demo2'}]}];
var index = 0;
//console.log(quizzes.length)
$("#clicks").click(function(){
if(typeof quizzes[index] != 'undefined'){
var html = '<li><span>'+quizzes[index].title+'</span></li>';
if(quizzes[index].choices.length > 0){
html+='<li class="choises">';
quizzes[index].choices.forEach((element, index, array) => {
//console.log(element.title);
html+='<ul>';
html+='<li><span>'+element.choice+'</span></li>';
html+='</ul>';
});
html+='</li>';
}
$("#eventCal").html(html);
index++;
}
if(quizzes.length === index)
$("#clicks").html("Finish");
})
});
</script>
</body>
推荐阅读
- lapack - LAPACK 3.8.0 安装 [znep.out] 错误 139
- postman - Postman Clean up 的集成点
- ruby-on-rails - 我将如何自动检测用户的位置并保存在数据库中?
- python - 使用 Excel Pandas 中的浮点值填充字典的问题
- vue.js - 通过关键参数保持活动视图路由器
- react-native - react-navigation A right-aligned drawerLabel
- android - Windows - Android studio 通过快捷方式打开项目
- python - list.clear() 与 list = [] 有何不同?
- php - SQL WHERE CONCAT LIKE NOT
- firebase - Firestore 错误 - 查询需要索引,但索引可能不可行?