Fzero0
@Fzero0
Вечный студент

Как из json(объект) создать форму?

Дана вот такая вот конструкция нее нужно преобразовать в форму?
q0 соответственно 1 вопрос, у него три ответа, a1 - это правильный
const data = {
  "q0":{
    "question":"1+1=?",
    "answer":{
      "a0":"1",
      "a1":"2",
      "a2":"0"
    },
    "right":["a1"]
  },
  "q1":{
    "question":"2*2=?",
    "answer":{
      "a0":"1",
      "a1":"4",
      "a2":"5"
    },
      "right":["a1"]
  }
};

Сходу навоял такую простыню, но потерял ответы и самое интересное это на против правильного ответа должен быть установленный checkbox?
$.each(data, key=>{
   $('table.table-test > tbody').append('<tr class="q-template"><td class="width-40">'+key+'</td><td style="vertical-align:top;"><textarea rows="4" name="'+key+'[question]" class="form-control">'+data[key].question+'</textarea></td><td><table class="table table-bordered table-answer"><tr class="a-template"><td><input class="form-control" type="text" placeholder="Ответ" name="'+key+'[answer][a1]"></td><td class="width-80"><div class="checkbox"><label>  <input type="checkbox" name="'+key+'[right][]" value="a1"> true</label></div></td><td class="width-80"><button class="delete-answer fa fa-trash btn btn-danger" type="button"></button></td></tr><tfoot><tr><td colspan="3"><button class="add-answer">Добавить ответ</button></td></tr></tfoot></table></td><td><button class="delete-question fa fa-trash btn btn-danger"></button></td></tr>');
});

Песочница
как правильнее все это разобрать и проставить чекбокс? Интересует больше сам подход решения ..
  • Вопрос задан
  • 641 просмотр
Решения вопроса 1
sabramovskikh
@sabramovskikh
Смотреть есть ли несколько ответов, если да, то делать это радиобатонами. Если ответ один, то делает инпут. Сделать each в each.
Лучше конечно написать класс, в котором будут методы renderRadio, renderCheckbox, RenderInput, RenderForm. В него передаем json и парсим его, инкрементируя одну переменную $html например. и в конце передает содержиое $html в нужный див, таблицу или чего там у вас
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы