我正在开发一个在前端使用Thymeleaf模板的Spring Boot MVC应用程序。

我正在尝试将MVC模型中的HashMap绑定到我的Thymeleaf模板之一中的JavaScript变量。到目前为止，这已完成：-

1. 在我的MVC控制器类中，我创建了一个HashMap，它表示按类别组织的用户技能。 Skill类是一个包含名称和id属性的数据对象：-

   Map<String,List<Skill>> skillsMap = new HashMap();

2. 我用所有类别和技能信息填充了此地图，然后将其添加到我的模型中：-

   model.addAttribute("skillsMap",skillsMap);

3. 在脚本部分的Thymeleaf模板上，我试图将此HashMap绑定到变量。然后，第二步，我尝试从地图中检索列表之一，并将其​​分配给第二个变量：-

   var skillsMapMap = [[${skillsMap}]];

   var adminList = skillsMapMap.get('Admin');

4. 当我对此进行调试时，我可以看到正在读取HashMap，并且正在尝试将其绑定到我的JavaScript变量：-

   var skillsMapMap = {Languages=[Python,SQL,PL/SQL,Java],Databases=[MySQL,Oracle,Mongo],Editors=[Word,TextPad,Notepad]};

乍看之下看起来不错，我可以看到它包含了我所有的数据，但是它抛出了以下错误：-

Uncaught Syntax Error: invalid shorthand property initializer

1. 对此进行了研究，我意识到此错误是由于Java默认情况下不以有效JSON格式序列化地图而导致尝试绑定到JavaScript变量失败。因此，与其像第2步那样直接将HashMap直接添加到Model中，我还添加了一些代码以使用Jackson首先将其转换为JSON String：-

   
   //Populate the map with all required data then....
   
   String objectMapper = null;
   try {
       objectMapper = new ObjectMapper().writeValueAsString(skillsMap);
   } catch (JsonProcessingException e) {
       e.printStackTrace();
   }
   model.addAttribute("skillsMap",objectMapper);```
   

2. 这一次，当我尝试将其绑定到我的JavaScript变量时，在浏览器中调试时，对象看起来像这样：-

var skillsMapJson = {"Languages_OD":[{"id":66,"name":"SQL"},{"id":67,"name":"PL/SQL"}],etc,etc};

JSON现在看起来有效，但是所有引号均被转义，并且现在引发另一个异常：-

```Uncaught SyntaxError: Unexpected token &```

我认为，如果JSON字符串包含实际的引号而不是“ Map将成功绑定到我的变量。我将对如何处理此问题提供任何建议。非常感谢您阅读。

编辑：下面添加了错误的屏幕截图：-