Как последовательно считывать данные json файла и отдавать в форму?
 

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

Собираю массив через
, но если внутрь поместить функцию 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>

А вывести все вопросы на страницу в одной форме и последовательно их показывать - не вариант?

Nexus,
вариант. А как это сделать? в смысле последовательно показывая и скрывая предыдущий вопрос? Прошу прощения, не дописал 3 строчки кода в функцию answers. Исправился.

Я правильно вас понял, что вы предлагаете каким-то образом выводить и последовательно скрывать вот этот перечень вопросов?

<form id="vote" action="#" method="POST">
<div id="content">
<h4 class="question">Какую марку предпочитаете?</h4>
             <div class="answers">
               <div class="radio"><label><input type="radio" name="poll" value="1">honda</label></div>
               <div class="radio"><label><input type="radio" name="poll" value="2">bmw</label></div> 
               <div class="radio"><label><input type="radio" name="poll" value="3">volvo</label></div>
                <button type="submit" class="btn btn-default">Ответить</button>
</div>
<h4 class="question">Цвет авто?</h4>
             <div class="answers">
               <div class="radio"><label><input type="radio" name="poll" value="1">black</label></div>
               <div class="radio"><label><input type="radio" name="poll" value="2">red</label></div> 
               <div class="radio"><label><input type="radio" name="poll" value="3">blue</label></div>
                <button type="submit" class="btn btn-default">Ответить</button>
</div>
</div>
</form>

giwuf,
в строке 2 добавить индекс = 0, по клику увеличивать и показывать вопрос согласно индексу

giwuf, если данные в json и их количество в наборе равно (по три кнопки), то нужно не строить постоянно html код, а заполнять значениями данных одних и тех же кнопок, двигаясь по массиву json.

Спасибо рони, вроде бы и улавливаю смысл сказанного, но не до конца понимаю, как в зависимости от индекса показывать вопрос и что делать в этом случае с foreach ?

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

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

      data.forEach(function(item) {

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

      });

      answers();
    });

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

  });
});

laimas, да согласен с вами, можно отформатировать и внедрить html вначале, у меня основной затык в том как заполнять значениями данных одних и тех же кнопок, двигаясь по массиву json, которые будут переключаться по кнопке ответить

выкинуть, зачем он нужен?

giwuf,
получили json, вывели все блоки на страницу, показали только блок с индексом 0.
по клику на btn скрыли блок с текущим индексом, увеличили индекс, открыли следующий блок

giwuf,
медитировать после создания всех полей тут
форма пошаговая обязательные поля