jsonデータ、nunjucks、forループを使用してフォームのラジオ入力を動的に反復する

Question

私は、nunjucksで動的に作成したいラジオボタンでできた大きなフォームを持っています。

各htmlフォームの入力グループに変数を設定するためのデータを含むjsonファイルがあります。 htmlはグループごとに2つの無線入力で構成されています。

私はjsonファイルから変数を取り出すことができますが、FORループの作成にはまっていません。

私が達成しようとしているのは、checklist.jsonの各サブセクションをループし、各配列の変数でhtmlリストを作成し、データの最後までリストを構築することです。

htmlからわかるように、各配列のすべての変数は、値を除くhtml入力ブロックで2回使用されます。

要約：配列を含むサブセクションがある限り、htmlフォームの入力を繰り返し、各配列内のオブジェクトをそれぞれ入力します。

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" 
        } 
       ]} 
      ]} 
     ]} 

チェックリスト-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 %}\ 

のように私は

Oughをしようとしておこう必要があるように見えます。わかった。 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>