How to display iteration index in Thymeleaf? [duplicate] - thymeleaf

Question

This question already has answers here:
Thymeleaf - How to loop a list by index
(2 answers)
Closed 1 year ago.
I'm attempting to display each row from an array using Thymeleaf - following their documentation I am unable to use any of the following attributes from th:each:
The current iteration index, starting with 0. This is the index
property.
The current iteration index, starting with 1. This is the count
property.
userinput.html:
<tr th:each="year : ${years}">
<th scope="row" th:text="${years}"></th>
<th scope="row" th:text="${bdcInterest}"></th>
<td th:text="${bdAmount}"></td>
</tr>
CalculatorController.java:
#RequestMapping(value = "/submit", method = RequestMethod.GET)
public String userInput(Model model, BigDecimal lumpsum, BigDecimal interestrate, BigDecimal monthlywithdrawal) {
BigDecimal initialinvestment = lumpsum;
BigDecimal[] bdAmount = new BigDecimal[11];
BigDecimal[] bdcInterest = new BigDecimal[11];
BigDecimal[] initialInvestment = new BigDecimal[11];
int[] years = new int[11];
bdcInterest[0] = new BigDecimal(0);
initialInvestment[0] = initialinvestment;
int increment = 1;
while(increment < 10) {
BigDecimal amount = lumpsum
.multiply(BigDecimal
.valueOf(1)
.add(interestrate
.divide(BigDecimal
.valueOf(100)))
.subtract(monthlywithdrawal
.multiply(BigDecimal
.valueOf(12)))); // Calculate the total yearly amount
BigDecimal cInterest = amount.subtract(initialinvestment); // Calculate only the interest earned
bdAmount[increment] = amount;
bdcInterest[increment] = cInterest;
initialInvestment[increment] = initialinvestment;
years[increment] = increment;
lumpsum = amount;
increment++;
}
model.addAttribute("years", years);
model.addAttribute("initialInvestment", initialInvestment);
model.addAttribute("bdAmount", bdAmount);
model.addAttribute("bdcInterest", bdcInterest);
return "userinput";
}
The necessary data is submitted correctly in each respective array, however I believe I've misunderstood the documentation:

Answer 1

Thymeleaf maintains the iteration status of the th:each tag in a special variable. Please, see the relevant documentation.
Among the different information provided in that variable, you can find an index property, which corresponds to the actual iteration index.
In you example, you probably could iterate your results like this:
<tr th:each="year, iterStat : ${years}">
<th scope="row" th:text="${year}"></th>
<th scope="row" th:text="${bdcInterest[iterStat.index]}"></th>
<td th:text="${bdAmount[iterStat.index]}"></td>
</tr>
To avoid this kind of problems, please, consider define in your code a simple java object that agglutinates the four properties you are iterating:
public class MuCustomObject {
private BigDecimal bdAmount;
private BigDecimal bdcInterest;
private BigDecimal initialInvestment;
private int year;
// getters and setters omitted for brevity
}
Then, use the object in your controller:
#RequestMapping(value = "/submit", method = RequestMethod.GET)
public String userInput(Model model, BigDecimal lumpsum, BigDecimal interestrate, BigDecimal monthlywithdrawal) {
BigDecimal initialinvestment = lumpsum;
List<MyCustomObject> myCustomObjectList = new ArrayList<MyCustomObject>();
MyCustomObject myCustomObject = new MyCustomObject();
myCustomObject.setBdcInterest(new BigDecimal(0));
myCustomObject.setInitialInvestment(initialinvestment);
myCustomObjectList.add(myCustomObject);
int increment = 1;
while(increment < 10) {
BigDecimal amount = lumpsum
.multiply(BigDecimal
.valueOf(1)
.add(interestrate
.divide(BigDecimal
.valueOf(100)))
.subtract(monthlywithdrawal
.multiply(BigDecimal
.valueOf(12)))); // Calculate the total yearly amount
BigDecimal cInterest = amount.subtract(initialinvestment); // Calculate only the interest earned
myCustomObject = new MyCustomObject();
myCustomObject.setBdAmount(amount);
myCustomObject.setBdcInterest(cInterest);
myCustomObject.setInitialInvestment(initialinvestment);
myCustomObject.setYear(increment);
myCustomObjectList.add(myCustomObject);
lumpsum = amount;
increment++;
}
model.addAttribute("myCustomObjects", myCustomObjectList);
return "userinput";
}
With that information you could directly iterate the collection:
<tr th:each="myCustomObject, iterStat : ${myCustomObjects}">
<th scope="row" th:text="${myCustomObject.year}"></th>
<th scope="row" th:text="${myCustomObject.bdcInterest}"></th>
<td th:text="${myCustomObject.bdAmount}"></td>
</tr>