Как выполнить одновременную итерацию множества массивов в одном цикле

Question

Я новичок с thymeleaf, и я хочу отобразить 3 значения из 3 разных массивов с одинаковым индексом внутри одного и того же div.row, я пробовал несколько способов, но я мог перебирать только один массив за раз без ошибок ниже моя сторона контроллера:

public String  index(Model model) {

  String[] table0 = {"0","1","2","3"}
  String[] table1 = {"14","21","25","75"}
  String[] table2 = {"7","63","57","87"}

  model.addAttribute("table0", table0;
  model.addAttribute("table1", table1);
  model.addAttribute("table2", table2);

  return "index";
}

Внутри файла html, table0 - первый массив, повторенный без ошибок, я не знаю, как редактировать / улучшать следующий код для отображения всех трех массивов tables0, tables1 и tables3 одновременно:

<div class="row" th:each="v0 : ${tables0}" >
    <div class="cell" th:text="value">
        <!-- Here I could display a value from tables0 -->
    </div>
    <div class="cell"  >
        <!-- Here I need to display the value of tables1 having the same index as v0 -->
    </div>
    <div class="cell"  >
        <!-- Here I need to display the value of tables2 having the same index as v0 -->                        
    </div>
</div>

Answer 1

здесь вы можете найти то, что ищете, сохранить статус итерации

, просто добавив переменную после объекта, и использовать index для получения текущего значения индекса

по примеру:

<div class="row" th:each="v0,iter : ${tables0}" >
    <div class="cell" th:text="value">
        <!-- Here I could display a value from tables0 -->
        <span th:text="${v0}"></span>
    </div>
    <div class="cell"  >
        <span th:text="${table1[iter.index]}"></span>
    </div>
    <div class="cell"  >
        <span th:text="${table2[iter.index]}"></span>                  
    </div>
</div>

Answer 2

Вы можете использовать Thymeleaf's iterStat для этого.

Предполагая следующие входные данные:

String[] table0 = {"0", "1", "2", "3"};
String[] table1 = {"14", "21", "25", "75"};
String[] table2 = {"7", "63", "57", "87"};

Вы можете использовать следующую разметку Thymeleaf:

<div class="row" th:each="val,iterStat  : ${table0}" >
    <div class="cell" th:text="${val}">
    </div>
    <div class="cell" th:text="${table1[iterStat.index]}">
    </div>
    <div class="cell" th:text="${table2[iterStat.index]}">
    </div>
</div>  

Это создает столбец чисел следующим образом (у меня нет CSS, так что это просто необработанный вывод):

0
14
7
1
21
63
2
25
57
3
75
87

Соответствующий html выглядит следующим образом:

<div class="row">
    <div class="cell">0</div>
    <div class="cell">14</div>
    <div class="cell">7</div>
</div>
<div class="row">
    <div class="cell">1</div>
    <div class="cell">21</div>
    <div class="cell">63</div>
</div>
<div class="row">
    <div class="cell">2</div>
    <div class="cell">25</div>
    <div class="cell">57</div>
</div>
<div class="row">
    <div class="cell">3</div>
    <div class="cell">75</div>
    <div class="cell">87</div>
</div>                

Функция iterStat описана здесь - она ​​в основном отслеживает ваши итерации. Поскольку вам нужен одинаковый индекс для каждой таблицы, он хорошо подходит для ваших нужд.