使用json data、nunjucks和for循环动态迭代表单单选输入
使用json data、nunjucks和for循环动态迭代表单单选输入
提问于 2017-01-24 16:20:44
我有一个由单选按钮组成的大表单，我想用双节棍动态创建它。
我有一个json文件，其中包含用变量填充每个html表单输入组的数据。html由每个组的两个无线电输入组成。
我可以从json文件中检索变量，但是在创建FOR循环时遇到了麻烦。
我试图获得的是遍历checklist.json中的每个子部分，并用每个数组中的变量填充html列表，构建列表直到数据的末尾。
从html中可以看到，除了value之外，每个数组中的所有变量都在html输入块中使用了两次。
摘要:只要有包含数组的子节，就迭代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"
}
]}
]}
]}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 %}有什么想法吗？
编辑:真实的列表要大得多，有很多部分和子部分。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-30 04:19:07
你试着走错了路。请看下面的代码，以获取第一部分的第一小节：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41823202
复制相关文章
相似问题
腾讯云开发者
