通过使用thymeleaf在JavaScript中使用嵌套的HashMap值迭代HashMap

菲尔·亚历克斯(Phill Alexakis):

这是添加到模型中的对象:

HashMap<String,HashMap<String,Integer>> eventByMonthAndYear;

我如何尝试迭代

我已经尝试过这些解决方案,但到目前为止对我来说都没有用。

使用百里香叶迭代HashMap

我的埃福德

<script  type="text/javascript" th:inline="javascript">


/*<![CDATA[*/

   /*[# th:each="entry: ${eventByMonthAndYear}"]*/

    console.log(/*[[${entry}]]*/);
    
    /*[/]*/     
    
/*]]>*/

</script>

没有打印任何对象,我至少如何检索第一个HashMap?

Andrewjames:

假设我们有以下测试数据:

Map<String, Integer> intMapA = new HashMap();
intMapA.put("one", 1);
intMapA.put("two", 2);
intMapA.put("three", 3);
        
Map<String, Integer> intMapB = new HashMap();
intMapB.put("four", 4);
intMapB.put("five", 5);
intMapB.put("six", 6);
        
Map<String, Map<String, Integer>> eventByMonthAndYear = new HashMap();
eventByMonthAndYear.put("Event A", intMapA);
eventByMonthAndYear.put("Event B", intMapB);
       
Map<String, Object> model = new HashMap();
model.put("events", eventByMonthAndYear);

这就是传递给Thymeleaf模板的内容。

我们可以events按以下方式访问Javascript中对象:

<script th:inline="javascript">
    var events = [[${events}]];
    console.log(events);
</script>

您可以用通常的JS方式迭代变量。

可能更有用的是访问HTML中的对象,并使用Thymeleaf遍历嵌套地图:

    <body>
        <div th:each="event : ${events}">
            <div th:text="${event.key}">
            </div>
            <div th:each="eventItem : ${event.value}">
                <div th:text="${' -> ' + eventItem.key} + ' - ' + ${eventItem.value}"></div>
            </div>
        </div>
    </body>

最后一个示例在浏览器中显示以下内容:

Event B
-> six - 6
-> four - 4
-> five - 5
Event A
-> one - 1
-> two - 2
-> three - 3

显然,由于我们特定使用哈希图,因此无法保证检索顺序与插入顺序相同。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章