Dynamiczne wprowadzanie dynamicznych danych wejściowych za pomocą danych json, nunjucks i pętli for

Question

Mam dużą formę z przycisków radiowych, które chciałbym dynamicznie tworzyć za pomocą nunjucks.

Mam plik json z danymi do wypełnienia każdej grupy wejściowej formularza html ze zmiennymi. HTML składa się z dwóch wejść radiowych na grupę.

Mogę pobrać zmienne z pliku json, ale utknąłem w tworzeniu pętli FOR.

Co próbuję osiągnąć, przechodzę przez każdą podsekcję w checklist.json i zapełniam listę html zmiennymi w każdej tablicy, budując listę aż do końca danych.

Jak widać z html, wszystkie zmienne z każdej tablicy są używane dwukrotnie w bloku wejściowym html z wyjątkiem wartości.

Podsumowanie: Tak długo, jak istnieją podsekcje zawierające tablicę, należy iterować dane wejściowe formularza HTML i zapełnić je obiektami w każdej macierzy.

index.njks

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

checklist.json (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" 
        } 
       ]} 
      ]} 
     ]} 

checklist-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 %} 

Myśli proszę?

edytuj: prawdziwa lista jest znacznie większa z wieloma sekcjami i podsekcjami.

Answer 1

Próbujesz pójść niewłaściwą ścieżką. Spójrz na ten kod, aby uzyskać pierwszy podrozdział pierwszego odcinka:

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

Czy widzisz, że wykaz jest Array, którzy dbają sekcja Array którzy utrzymać podrozdział obiekt o potrzebne dane. Spróbuj przejść tą ścieżką. Spróbuję to zrobić, ale po raz pierwszy spotykam tę bibliotekę.

Tutaj przejdę obok jsfiddle link i spróbuję rozwiązać nieco później.

UPD1: To jak to wygląda musimy zagnieżdżona for jak

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

będę próbować

ough. Mam to. Check my example here. Skracam kod, aby pokazać główne zmiany, które musisz wykonać. Jeśli potrzebujesz dalszych wyjaśnień lub przepisywania kodu, daj mi tylko linię. Lub dalej more code example. Miłego kodowania!

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>