CODEWITHSUNDEEP
javascriptajax
mafortis
mafortis

Reputation: 7128

How to get child arrays in ajax html()

I have a form for my array of data will print to view with html() and this data each one has child array, I need to get data of those child arrays in my html() as well

Screenshots

my data

one

how it will look

two

# Code

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
});

Any idea?

Upvotes: 0

Views: 67

Answers (2)

Ajith
Ajith

Reputation: 2666

Please see my code below

<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>

Upvotes: 2

quachtinh761
quachtinh761

Reputation: 234

Inside of row, you can get the choices by:

let choices = quizzes[index].choices

Upvotes: 0

Related Questions