Iterate form radio inputs dynamically with json data, nunjucks and a for loop

Question

I have a large form made of radio buttons that I would like to create dynamically with nunjucks.

I have a json file with data to populate each html form input group with variables. The html consists of two radio inputs per group.

I can retrieve the variables from the json file but am stuck on creating the FOR loop.

What I am trying to acheive is loop through each subsection in checklist.json and populate the html list with the variables in each array, building the list until the end of the data.

As you can see from the html all of the variables from each array are used twice in the html input block except value.

Summary: For as long as there are subsections containing an array, iterate the html form inputs and populate each with the objects in each array.

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

Thoughts please?

edit: the real list is much bigger with many sections and subsections.

Answer 1

You've trying to go wrong path. Look at this code to get first subsection of first section:

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

Do you see that checklist is Array who care section Array who keep subsection Object with data you need. Try to walk by this path. I'll try to do it so but it's first time I meet this library.

I'll past the jsfiddle link here and try to resolve a bit later.

UPD1: It's looks like we need nested forlike

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

I'll keep trying

Ough. I got it. Check my example here. I make code shorter to show up main changes you need to do. If you need further explanation or code rewrite just give me a line. Or further more code example. Have a nice coding!

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>