Показать сообщение отдельно
  #1 (permalink)  
Старый 18.09.2018, 20:23
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Как последовательно считывать данные json файла и отдавать в форму?
Есть интерфес опросника, который работает без перезагрузки страницы и данные которые берутся из json файла.
Вариант с одним вопросом реализован, сложности начинаются, когда вопросов много в цепочке один за другим.
Как сделать так, чтобы считывать данные из json файла в массив и последовательно отдавать после нажатия на кнопку ответить очередного вопроса?

Собираю массив через
Код:
data.forEach(function(item) {});
, но если внутрь поместить функцию answers, то абсолютно все ответы ждя разных вопросов просто отобразятся на одной страницы.
Как можно реализовать задуманное?

Фидл здесь - http://jsfiddle.net/qxrognd6/

$(function() {
  var vote = {};
  $('#ok').click(function() {

    $.get(poll.json, function(data) {

      // фактически данные poll.json хранятся в таком виде
      //data = [{"id":"1", "question":"Какую марку предпочитаете?", "answers":["honda", "bmw", "volvo"]}, {"id":"2", "question":"Цвет авто?", "answers":["black", "red", "blue"]}

      data.forEach(function(item) {

        vote.id = item.id;
        vote.question = item.question;
        vote.answers = item.answers;

      });

      answers();
    });

    appearance('#start', '#content');
    return false;

  });

  var appearance = function(slide, content) {
    $(slide).hide('fast', showNewContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');

    function showNewContent() {
      $(content).show('normal', hideLoader());
    }

    function hideLoader() {
      $('#load').fadeOut('normal');
    }
  };
  var answers = function() {
    for (var i = 0; i <= vote['answers'].length - 1; i++) {
    var form = $('#vote');
    var answers = form.find('.answers');
    form.parent().find('.question').text(vote['question']);
      answers.append('<div class="radio">' +
        '<label>' +
        '<input type="radio" name="poll" value="' + (i + 1) + '">' +
        vote['answers'][i] +
        '</label>' +
        '</div>');
    }
  };
});

<div id="start">
<a id='ok' href=''>Поехали</a>
</div>
<div id="content">
<h4 class="question">Вопрос</h4>
<form id="vote" action="vote.php" method="POST">
   <div class="answers"></div>
   <button type="submit" class="btn btn-default">ответить</button>
</form>
</div>

Код:
#content {
	display: none;
}
#load {
 display: none;
 position: absolute;
 right: 10px;
 top: 10px;
 width: 43px;
 height: 11px;
 text-indent: -9999em;
}

Последний раз редактировалось giwuf, 18.09.2018 в 22:05.
Ответить с цитированием