Визуализация вложенного ассоциативного массива с помощью ветки

Question

Я столкнулся с небольшой проблемой, с которой мне нужна помощь. У меня есть это приложение php, которое передает данные в шаблон HTML ветки.

Мой PHP-код генерирует следующее (упрощенно):

$menuItemsWithPictures = array(
   'PageName' => "page_name",
   'pictures' => array('/path/to/picture1.jpg', '/path/to/picture2.jpg'),
);

В моем интерфейсе я бы хотел, чтобы каждый из элементов в $menuItemsWithPictures был преобразован в нечто вроде этого (опять же, очень упрощенно):

<div>
  <a href=PageName><!-- Taken from the PageName key in the array-->
     <img src=picture1 /> <!-- taken from pictures array [0] -->
     <img src=picture2 /> <!-- taken from pictures array [1] -->
  </a>
</div>

Я пробовал некоторые варианты {% for key, value in array %}, но безрезультатно, потому что я всегда заканчивал тем, что тег a генерировался так часто, как массив длинный.

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

Привет, derelektrischemoench

Answer 1

Вам понадобится вложенный цикл, чтобы достичь того, что вы хотите, первый цикл будет перебирать страницы, а внутренний цикл будет обрабатывать изображения:

<div>
{% for page in pages %}
  <a href="#{{ page.PageName }}">
  {% for picture in page.pictures %}
     <img src={{ picture }} />
  {% endfor %}
</a>
{% endfor %}
</div>

Вот скрипка для ветки для вашего варианта использования: https://twigfiddle.com/8ncmqi

Answer 2

Я думаю, что вы ошиблись в примере с массивом. Я полагаю, что вы на самом деле собираете многомерный массив, не так ли? Как это:

$menuItemsWithPictures = [
    [
        'pageName' => 'page_name',
        'pictures' => array('/path/to/picture1.jpg', '/path/to/picture2.jpg'),
    ],
    [
        'pageName' => 'another_page',
        'pictures' => array('/path/to/picture1.jpg', '/path/to/picture2.jpg'),
    ]
];

Если это так, то синтаксис Corret Twig будет:

<div>
    {% for item in menuItemsWithPictures %}
        <a href="{{ item.pageName }}">
            {% for image in item.pictures %}
                <img src="{{ image }}"/>
            {% endfor }
        </a>
    {% endfor %}
</div>