Thymeleaf：如何搜索具有变量索引的数组？答案

【问题标题】：Thymeleaf: How can I search an array with a variable index?Thymeleaf：如何搜索具有变量索引的数组？
【发布时间】：2020-10-01 10:40:26
【问题描述】：

如何将变量用作数组的索引，通过 JavaScript 函数在 HTML 中通过 Thymeleaf 访问？

在这种情况下，我想使用 gcounter 作为数组 tlist 的变量索引

输入正常。

这个[[${tlist[1].id}]] 也很好用。

但我需要一个变量索引。

有什么想法吗？

编辑：我的问题与此非常相似： Struts2 Access specific index of list when index is a variable

    <form>
           <div>
               <input  id="favoriteInput" maxlength="3" name="favNummer" required type="number"/>
               <input onClick="saveFavorit();" type="Submit"/>
               <script th:inline="javascript">
             function saveFavorit() {
                 var counter = document.getElementById("favoriteInput").value
                 var gcounter = Number(counter);

                 var idz = [[${tlist[(var gcounter;)].id}]];
                   "; path=/";

                 document.cookie = "id=" + idz +"; expires=" + "Fri, 31 Dec 9999 23:59:59 GMT"+"; path=/";

             }
               </script>
           </div>
       </form>

【问题讨论】：

标签： javascript arrays spring-boot spring-mvc thymeleaf

【解决方案1】：

您可以通过将单个步骤 [[${tlist[index].id}]] 分成两个步骤来做到这一点：

1) 从 Thymeleaf 填充 JS 变量（数据数组）。

2) 使用输入字段中提供的值访问所需的数组条目。

假设您有一个包含User 对象的 Java 数组，类似于以下内容，带有一个用户 ID 和一个用户名...

User user1 = new User(123, "Bob");
User user2 = new User(124, "Anne");
User user3 = new User(125, "Jane");
User[] users = { user1, user2, user3 };

...您的模板中有一个类似于以下内容的输入字段：

<div>
    <input id="favoriteInput" 
           maxlength="3" 
           name="favNummer" 
           required type="number"
           onClick="saveFavorit();"/>
</div>

...然后您可以包含类似于以下内容的脚本：

<script th:inline="javascript">
  function saveFavorit() {
    var index = document.getElementById("favoriteInput").value;
    var usersArray = [[${users}]];
    if (index >= 0 && index <= usersArray.length - 1) {
      var selectedUserName = usersArray[index].userName;
    }
    console.log(selectedUserName);
  }
</script>

这将打印出与输入字段中的索引号相对应的用户名（到浏览器的控制台）。 “0”值将打印“Bob”，依此类推。

因为 Thymeleaf 是在服务器端处理的，它不知道用户在网页上输入字段中输入的值。

【讨论】：

非常感谢！这正是我要找的东西