Ajax добавить массив данных по отдельности - PullRequest
Новая
       0

Ajax добавить массив данных по отдельности

0 голосов
/ 09 января 2020

У меня есть массив данных, возвращаемых на Ajax, и я хочу показать их по одному на панели, в настоящее время они все находятся на одной панели одновременно, я sh, чтобы иметь несколько шагов этих данных.

Код

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

это $('.answerPanel').append(i.question); возвращает все данные вместе, на мой взгляд, Я также пытался этот ответ единственная разница была в том, что он имел тормозную линию с ним:)

Результат

one

Вопрос

Мой вопрос: как я могу создать многошаговую панель с этими данными?

Что я ищу, так это how are you?fg ( на основе моего скриншота ) на первой странице, затем я нажимаю кнопку "Далее" и получаю uid и так далее ...

Я знаю, этот вопрос может показаться глупым, но, пожалуйста, попробуйте помочь до того, как отдать голос:)

Ответы [ 2 ]

1 голос
/ 09 января 2020

Я думаю, что итератор именно то, что вы ищете. Это просто, но так элегантно и мощно: 

<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>
1 голос
/ 09 января 2020

Можете ли вы попробовать следующий код 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...