Looping twig DIV and list with my JSON array - html

Question

Hey Guys I have the following code which loops the <section> everytime I use it within the JSON. This works fine.
However, I am having problems with the nested loop {% for list in lists %} which handles the li elements. It comes out blank and seems to only loop twice when I inspect the element?
{# Question 1 #}
{% for question in questions %}
<section>
<div class="container question" id="question-one">
<div class="row row-eq-height">
<div class="gradient"></div>
<div class="col-md-1 green-box">
<div class="number"><span>1</span></div>
</div>
<div class="col-md-10 dark-grey-box text-center">
<div class="content-wrapper">
{{ question.text|markdown }}
{# SLIDER #}
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="slider-container">
<ul class="list-inline justify-content-center range-labels">
{% for list in lists %}
<li class="list-inline-item"><img src="{{ list.img }}"><span>{{ list.label }}</span></li>
{% endfor %}
</ul>
<div class="range-wrapper">
<img src="../resources/images-assets/images/place-holder-slider.png">
</div>
</div>
</div>
</div>
<div class="cta-wrapper">
<button id="question-one-submit" onclick="buttonClick()">DONATE £1</button>
</div>
</div>
</div>
<div class="col-sm-1 dark-grey-box"></div>
</div>
</div>
</section>
{% endfor %}
In my JSON file I have laid everything out as follows:
"questions": [
{
"text": "##How confident are you in achieving your marketing goals this year?",
"lists": [
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" }
]
}
],
I want the li to appear 5 times with the relevant image and label as I have added in the JSON file.
Can anyone point me in the right direction?

Answer 1

I managed to get this working correctly. Here is the markup:
{% for question in questions %}
<section>
<div class="container question" id="question-{{ loop.index }}">
<div class="row row-eq-height">
<div class="gradient"></div>
<div class="col-md-1 green-box">
<div class="number"><span>
{{ loop.index }}
</span></div>
</div>
<div class="col-md-10 dark-grey-box text-center">
<div class="content-wrapper">
{{ question.text|markdown }}
{# SLIDER #}
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="slider-container">
<ul class="list-inline justify-content-center range-labels">
{% for option in question.options %}
<li class="list-inline-item"><img src="{{ option.img }}"><span>{{ option.label }}</span></li>
{% endfor %}
</ul>
<div class="range-wrapper">
<img src="images/place-holder-slider.png">
</div>
</div>
</div>
</div>
<div class="cta-wrapper">
<button id="button-{{ loop.index }}" onclick="buttonClick()">{{ question.button }}</button>
</div>
</div>
</div>
<div class="col-sm-1 dark-grey-box"></div>
</div>
</div>
</section>
{% endfor %}
The JSON file I am using to accompany this is as follows:
"questions": [
{
"text": "##How confident are you in achieving your marketing goals this year?",
"options": [
{ "img": "images/sad.svg", "label": "Dejected" },
{ "img": "images/thinking-2.svg", "label": "Doubtful" },
{ "img": "images/like.svg", "label": "Hopeful" },
{ "img": "images/check.svg", "label": "Upbeat" },
{ "img": "images/goal.svg", "label": "Surefire" }
],
"button": "DONATE £1"
},
{
"text": "##What are the greatest challenges you face?",
"options": [
{ "img": "images/money-bag.svg", "label": "Budget" },
{ "img": "images/team.svg", "label": "Resources" },
{ "img": "images/bar-chart.svg", "label": "ROI" },
{ "img": "images/timer.svg", "label": "Short-termis" },
{ "img": "images/martech.svg", "label": "Martech" }
],
"button": "DONATE £1"
},
{
"text": "##Where could external agencies add the most value?",
"options": [
{ "img": "images/networking.svg", "label": "ABM" },
{ "img": "images/increasing-stocks-graphic-of-bars.svg", "label": "Demand" },
{ "img": "images/options.svg", "label": "Strategy" },
{ "img": "images/full-items-inside-a-shopping-bag.svg", "label": "Sales Enablement" },
{ "img": "images/content.svg", "label": "Content" }
],
"button": "DONATE £1"
},
{
"text": "##Would you be interested in a further conversation?",
"options": [
{ "img": "images/thumb-down.svg", "label": "Don't contact me again" },
{ "img": "images/maybe.svg", "label": "Unlikely this year" },
{ "img": "images/info.svg", "label": "Need to know more" },
{ "img": "images/calendar.svg", "label": "Get a date in the diary" },
{ "img": "images/boy-broad-smile.svg", "label": "Call me now" }
],
"button": "DONATE £1"
}
],