后端map数据，前端转成数组显示

最新推荐文章于 2025-06-05 21:01:51 发布

lst991120

最新推荐文章于 2025-06-05 21:01:51 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： spring 前端JavaScript 文章标签： spring boot js

本文链接：https://blog.csdn.net/lst991120/article/details/108037947

前端JavaScript 同时被 2 个专栏收录

10 篇文章

订阅专栏

spring

4 篇文章

订阅专栏

本文介绍了一个Spring Boot项目中，后端使用Thymeleaf拦截器，Controller返回Map数据到前端。为了方便代码书写，前端需要将接收到的Map数据转换为数组形式。在JavaScript中，需要注意使用`th:inline`来正确获取Model中的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（前言：spring boot项目，使用了Thymeleaf拦截器）
后端controller如下：

    //原料
    QueryWrapper<Ingredient> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("is_del",2);
    List<Ingredient> list= iIngredientService.list(queryWrapper);
    HashMap<Long, String> map = new HashMap<Long,String>();
	for(int j = 0; j<list.size(); j++){
        map2.put(list.get(j).getId(),list.get(j).getName());
    }
    model.addAttribute("ingredient",map);

返回给前端的数据是
在这里插入图片描述
前端将map数据转化为数组的形式，更便于代码书写

 var ingredient = [[${ingredient}]]// console.log(ingredient)
 //原料
 var ingredients = [];
  //map转数组
     var list = [];
     for (var key in ingredient) {
         list.push( /*或list.push([key, ingredient[key]])*/
             {
                 id:key,
                 name:ingredient[key]
             }
         );

在这里插入图片描述
注意：
js通过model取值必须加上th:inline ，通常在取值的前后会加上不同的注释

<script language='javascript' th:inline="javascript">
 var ingredient =[[${ingredient }]];
</script>