Ajax append array data individually

Question

I have array of data returning by Ajax and I want to show them one by one in panel, currently they are all in one panel at the same time, I wish to have multiple step of this data.

Code

HTML

<div class="panel-body">
  <div class="answerPanel"></div>
</div>

Script

$.ajax({
    type:'GET',
    url:'{{url('dashboard/getQuizzes')}}/'+projectId,
    beforeSend: function(data) {
        console.log("click - ajax before send", data);
    },
    success:function(data){
        $(data.quizzes).each(function(_, i){
            $('.answerPanel').append(i.question);
        });
    }
});

this $('.answerPanel').append(i.question); is returning all data together in my view, I also tried this answer the only difference was it had brake line with it :)

Result

Question

My question is how can I make multi step panel with this data?

What I'm looking for is having how are you?fg (based on my screenshot) in first page then I click next button and get uid and so on...

I'm aware this question might seem silly but please try to help before giving down vote :)

so first it should load how are you?fg and there is a next button when you click on it only the uid should resolve and added as the next line like wise you need to get it. Is that what you are looking for ? — Beginner
– Beginner, Commented Jan 9, 2020 at 6:38
Make a global variable say var quizzes = []; Then on ajax success assign quizzes = data.quizzes. And on a button click fetch one by one and append on your element. — Ajith
– Ajith, Commented Jan 9, 2020 at 6:38
@Ajith where should i make that global variable? would you mind sharing an answer please? — mafortis
– mafortis, Commented Jan 9, 2020 at 6:40
'{{url('dashboard/getQuizzes')}}/'+projectId this gives all the response as list or it loads one at a time like how are you?fg have project id as 1 and uid is having project id as 2 — Beginner
– Beginner, Commented Jan 9, 2020 at 6:42

Ajith · Accepted Answer · 2020-01-09 08:36:18Z

1

Can you try the below code

<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:[{title:'choice1'},{title:'choice2'}]},
				   {title:'title2',choices:[{title:'new1'},{title:'new2'}]},
				   {title:'title3',choices:[{title:'demo1'},{title:'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.title+'</span></li>';
				html+='</ul>';
			});
			html+='</li>';
			}
			
			
			$("#eventCal").html(html);
			index++;
		}
		if(quizzes.length === index)
			$("#clicks").html("Finish");
		
	})
});

</script>
</body>

edited Jan 9, 2020 at 8:36

answered Jan 9, 2020 at 6:47

Ajith

2,6784 gold badges21 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

mafortis Over a year ago

oh you were using id instead of class :)

mafortis Over a year ago

ok it returns one by one but still in same panel, i need to remove old data when i click next button.

Ajith Over a year ago

Then do html instead of append, Modified in the code now

mafortis Over a year ago

ok that works, is there possible way to change button text when all object are finished?

Ajith Over a year ago

@mafortis Can you check now

|

tipos · Accepted Answer · 2020-01-09 08:45:53Z

1

I think iterator is exactly what you looking for. It is simple yet so elegant and powerfull:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3 id="question"></h3>
<div id="answers"></div>
<button id="nextBtn">Next question</button>

<script>

  // Iterator
  function iterator(array) {
    var nextIndex = 0;

    return {
      next: function() {
        return nextIndex < array.length
          ? { value: array[nextIndex++], done: false }
          : { done: true };
      }
    };
  }

  $(document).ready(function() {
  
    var quizzesArray = [
      {
        question: 'How are you?',
        choices: [
          { choice: 'Okay' },
          { choice: 'Bad' },
          { choice: 'Who cares?' }
        ]
      },
      {
        question: 'What time is it now?',
        choices: [{ choice: '4pm' }, { choice: '2am' }, { choice: 'No idea' }]
      },
      {
        question: 'What is your job?',
        choices: [
          { choice: 'Student' },
          { choice: 'Teacher' },
          { choice: 'Unemployed' }
        ]
      },
      {
        question: 'Why are you angry?',
        choices: [
          { choice: 'I am hungry' },
          { choice: 'I lost my dog' },
          { choice: 'Not angry' }
        ]
      }
    ];

    // Initialize the iterator
    var quiz = iterator(quizzesArray);

    $('#nextBtn').click(function() {
      var upNext = quiz.next();

      if (upNext.done) {
        return;
      }

      var current = upNext.value;
      var answers = '';

      current.choices.forEach(function(choice) {
        answers += `
          <p>
            <input type="radio" name="answer" value="${choice.choice}">
            <label>${choice.choice}</label>
          </p>
        `;
      });

      $('#question').text(current.question);
      $('#answers').html(answers);
      
    });
  });
</script>

edited Jan 9, 2020 at 8:45

answered Jan 9, 2020 at 7:46

tipos

4421 gold badge4 silver badges13 bronze badges

5 Comments

mafortis Over a year ago

and then how do i loop my child arrays in this? each quizzesArray has array inside of it as answers so later user can select those answers.

tipos Over a year ago

So, it is like a multiple choice test, you want to print one question and also 3-4 possible answers. Did I get you right?

mafortis Over a year ago

these might help ibb.co/sWNpmyZ and ibb.co/MsyWDzB

mafortis Over a year ago

made new question might be cleaner with my full code stackoverflow.com/questions/59659932/…

tipos Over a year ago

You can use same iterator function. I have edited my answer, feel free check it out.

Collectives™ on Stack Overflow

Ajax append array data individually

Code

Result

Question

2 Answers 2

12 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Code

Result

Question

2 Answers 2

12 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related