Цикл DIV ветки и список с моим массивом JSON - PullRequest
Новая
       21

Цикл DIV ветки и список с моим массивом JSON

0 голосов
/ 08 февраля 2019

Эй, ребята, у меня есть следующий код, который зацикливает <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 появится 5 раз с соответствующим изображением и меткой, как я добавил в JSON-файле.

Может кто-нибудь указать мне правильное направление?

1 Ответ

0 голосов
/ 11 февраля 2019

Мне удалось заставить это работать правильно.Вот разметка: 

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