使用 json 数据、nunjucks 和 for 循环动态迭代表单无线电输入

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

您是否看到清单是 Array who care section Array who keep subsection Object with your needed.试着走这条路。我会尝试这样做，但这是我第一次见到这个图书馆。

我会跳过这里的jsfiddle link，稍后再尝试解决。

UPD1：看起来我们需要嵌套 forlike

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

使用 json 数据、nunjucks 和 for 循环动态迭代表单无线电输入

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

javascript

jinja2

nunjucks