Итерационные формы радиовходы динамически с данными json, nunjucks и for loop

Question

У меня есть большая форма из переключателей, которые я бы хотел создать динамически с помощью nunjucks.

У меня есть файл json с данными для заполнения каждой группы ввода формы html с переменными. Html состоит из двух радиовходов на группу.

Я могу получить переменные из json-файла, но я застрял на создании цикла FOR.

То, что я пытаюсь выполнить, - это цикл через каждый подраздел в файле checklist.json и заполнять список html переменными в каждом массиве, создавая список до конца данных.

Как видно из html, все переменные из каждого массива используются дважды в блоке ввода html, за исключением значения.

Реферат: До тех пор, пока существуют подразделы, содержащие массив, перебирайте входы формы html и заполняйте каждый из объектов в каждом массиве.

index.njks

{% include "../includes/checklist-radio.njk" %} 

checklist.json (вар = checklist_json)

{"checklist_title":"checklist variable test", 
"checklist": [ 

    {"section_title":"Responsive Design (Useability)", 
    "section":[ 

       {"subsection_title1":"Mozilla Firefox Useability", 
       "subsection":[ 

        { 
        "radio_title": "Mobile (Samsung S7 Edge)", 
        "name":"firefox_mobile", 
        "value": 1, 
        "class":"useability" 
        }, 

        { 
        "radio_title": "Tablet (Surface Pro)", 
        "name":"firefox_tablet", 
        "value": 1, 
        "class":"useability" 
        }, 

        { 
        "radio_title": "Desktop (Windows 10)", 
        "name":"firefox_desktop", 
        "value": 1, 
        "class":"useability" 
        } 
       ]} 
      ]} 
     ]} 

Контрольный список-radio.njk

{% for checklist_json.checklist.section.subsection in checklist_json.checklist.section %} 
    <li> 
    <span class="radio_title">{{checklist_json.checklist.section.subsection.radio_title}}</span> 

    <label class="radio_label"> 
     <input type="radio" class="radio {{checklist_json.checklist.section.subsection.class}}" name="{{checklist_json.checklist.section.subsection.name}}" value="{{checklist_json.checklist.section.subsection.value | escape}}"> 
    Yes</label> 

    <label class="radio_label"> 
     <input type="radio" class="radio {{checklist_json.checklist.section.subsection.class}}" name="{{checklist_json.checklist.section.subsection.name}}" value="0"> 
    No</label> 
</li> 
{% endfor %} 

Мысли пожалуйста?

Редактировать: реальный список намного больше со многими разделами и подразделами.

Answer 1

Вы пытаетесь пойти неверным путем. Посмотрите на этот код, чтобы получить первый подраздел первого раздела:

checklist_json.checklist[0].section[0].subsection 

Вы видите, что перечень является массив, который волнует раздел массива, который держать подраздел объекта с данными вам нужно. Попытайтесь пройтись по этому пути. Я постараюсь сделать это, но в первый раз я встречаюсь с этой библиотекой.

Пройдите мимо jsfiddle link и попробуйте решить немного позже.

UPD1: Это выглядит, как нам нужно вложенная for как

{% for checklist in checklist_json %}\ 
    {% for section in checklist %}\ 
     {% for subsection in section %}\ 

Я буду стараться

тельное. Я понял. Check my example here. Я делаю код короче, чтобы показать основные изменения, которые вам нужно сделать. Если вам нужно дополнительное объяснение или переписать код, просто дайте мне строку. Или далее more code example. Хорошее кодирование!

nunjucks.configure({ autoescape: false }); 
 

 
var checklist_json = { 
 
    "checklist_title": "checklist variable test", 
 
    "checklist": [ 
 

 
    { 
 
     "section_title": "Responsive Design (Useability)", 
 
     "section": [ 
 

 
     { 
 
      "subsection_title1": "Mozilla Firefox Useability", 
 
      "subsection": [ 
 

 
      { 
 
       "radio_title": "Mobile (Samsung S7 Edge)", 
 
       "name": "firefox_mobile", 
 
       "value": 1, 
 
       "class": "useability" 
 
      }, 
 

 
      { 
 
       "radio_title": "Tablet (Surface Pro)", 
 
       "name": "firefox_tablet", 
 
       "value": 1, 
 
       "class": "useability" 
 
      }, 
 

 
      { 
 
       "radio_title": "Desktop (Windows 10)", 
 
       "name": "firefox_desktop", 
 
       "value": 1, 
 
       "class": "useability" 
 
      } 
 
      ] 
 
     } 
 
     ] 
 
    } 
 
    ] 
 
}; 
 

 
document.body.innerHTML = nunjucks.renderString("" 
 
+ "<h1>{{ checklist_title }}</h1>" 
 
+ "{% for checklist in checklist %}" 
 
+ "<h2>{{ checklist.section_title }}</h2>" 
 
+ "{% for section in checklist.section %}" 
 
+  "<h3>{{ section.subsection_title1 }}</h3>" 
 
+  "{% for subsection in section.subsection %}" 
 

 
+ "<li>" 
 
+  "<span class='radio_title'>" 
 
+   "{{subsection.radio_title}}" 
 
+  "</span>" 
 

 
+  "<label>" 
 
+   "<input type='radio' " 
 
+     "class='radio {{subsection.class}}' " 
 
+     "name='{{subsection.name}}' " 
 
+     "value='{{subsection.value | escape}}'>" 
 
+   "Yes" 
 
+  "</label>" 
 

 
+  "<label>" 
 
+   "<input type='radio' " 
 
+     "class='radio {{subsection.class}}' " 
 
+     "name='{{subsection.name}}' " 
 
+     "value='0'>" 
 
+   "No" 
 
+  "</label>" 
 
+ "</li>" 
 

 
+  "{% endfor %}" 
 
+ "{% endfor %}" 
 
+ "{% endfor %}", checklist_json);

<script src="https://cdnjs.cloudflare.com/ajax/libs/nunjucks/3.0.0/nunjucks.js"></script>