html - 用我的 JSON 数组循环树枝 DIV 和列表

Question

嘿伙计们，我有以下代码，<section>每次我在 JSON 中使用它时都会循环。这工作正常。

{% for list in lists %}但是，处理li元素的嵌套循环有问题。当我检查元素时，它出现空白并且似乎只循环两次？

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

在我的 JSON 文件中，我将所有内容都列出如下：

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

我希望li与我在 JSON 文件中添加的相关图像和标签一起出现 5 次。

谁能指出我正确的方向？

标签： htmljsonloopsnestedtwig

Answer 1

我设法让它正常工作。这是标记：

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

我使用的 JSON 文件如下：

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