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

旧城等待， 2022-11-28 00:45 167阅读 0赞

（前言：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);

返回给前端的数据是  
![在这里插入图片描述][20200816162926571.png_pic_center]  
前端将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]
                 }
             );

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

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

[20200816162926571.png_pic_center]: /images/20221124/6c6c686046154ed38324873931304c74.png
[2020081616324249.png_pic_center]: /images/20221124/de7f507e517f4a2cbaa44379cc2a09af.png

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关前端传递JSON数组数据到后端（解析方法）

在前端和后端之间传递数组时，由于HTTP协议的限制，无法直接传递数组类型的参数。请求参数需要被转换为字符串格式传递给后端，所以需要通过 JSON.stringify()

「爱情、让人受尽委屈。」/ 2024年03月16日 10:17/ 0 赞/ 64 阅读

相关前端发送数据给后端，后端只得部分数据

项目场景：前后端联调 -------------------- 问题描述前端发送数据给后端，后端只得部分数据前端代码: 前端总共有四个数据，统一封装到

快来打我*/ 2023年10月16日 11:38/ 0 赞/ 51 阅读

相关 java后端接收map参数vue前端传递

1、vue前端 export default { name: 'downcardlist', data() {

野性酷女/ 2023年09月30日 10:24/ 0 赞/ 4 阅读

相关前端获取后端数据

前端获取后端数据前阵子做个项目，因为涉及到前端代码，奈何前端知识有限，有个问题搞了好久。前端的js里需要一个数组，我后端都封装好了，但是这短短的距离我却不知道怎么拿

逃离我推掉我的手/ 2023年01月13日 09:00/ 0 赞/ 203 阅读

相关 fastjson将json转成Map类型数据

> 文章最前：我是Octopus，这个名字来源于我的中文名--章鱼；我热爱编程、热爱算法、热爱开源。所有源码在我的个人[github][] ；这博客是记录我学习的点点滴滴，如

素颜马尾好姑娘i/ 2022年12月29日 14:28/ 0 赞/ 206 阅读

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

（前言：spring boot项目，使用了Thymeleaf拦截器）后端controller如下： //原料 QueryWrapper<Ingr

旧城等待，/ 2022年11月28日 00:45/ 0 赞/ 168 阅读

相关 java map转xml 工具类_工具类--map 转成xml xml转成map

public class WxChatReq \{ /\\ \ Map转换成XML \ @param data \ @return \ @throws Excepti

一时失言乱红尘/ 2022年11月06日 07:54/ 0 赞/ 355 阅读

相关实体对象转成Map Map转成实体对象

public class MapBeanUtil { / 实体对象转成Map @p

拼搏现实的明天。/ 2022年10月07日 14:47/ 0 赞/ 244 阅读

相关 Map转成Json格式

import com.fasterxml.jackson.databind.ObjectMapper; Map<String, String

Myth丶恋晨/ 2022年06月01日 00:23/ 0 赞/ 478 阅读

相关（转）SimpleCursorAdapter修改数据前端显示

众所周知，用SimpCursorAdapter可以很方便的把数据库中的数据绑定到前台显示，但是有时候数据库中取出的数据，并不是我们要直接显示的数据，而是想稍作修改再表示出来，比

逃离我推掉我的手/ 2022年04月25日 03:28/ 0 赞/ 152 阅读