Serliazing Java HashMap to JSON using Jackson ObjectMapper

Question

I am developing a Spring Boot MVC application that uses Thymeleaf templates on the front end.

I am trying to bind a HashMap from my MVC model to a JavaScript variable in one of my Thymeleaf templates. This is what has been done so far: -

1. In my MVC controller class, I created a HashMap that represents user skills organised into categories. The Skill class is a data object containing name and id properties: -

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

2. I populated this map with all the category and skill information and then added it to my Model: -

   model.addAttribute("skillsMap", skillsMap);

3. On my Thymeleaf template in a script section, I am attempting to bind this HashMap to a variable. As a second step I then attempt to retrieve one of the lists from the map and assign to a second variable: -

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

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

4. When I debugged this, I could see that the HashMap was being read and an attempt was being made to bind it to my JavaScript variable: -

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

This looked good at first glance and I could see that it contained all my data, but it was throwing the following error: -

Uncaught Syntax Error: invalid shorthand property initializer

5. Having researched this, I realized that this error was caused because Java does not by default serialize the map in valid JSON format and so the attempted bind to a JavaScript variable failed. So, instead of just adding the HashMap straight to the Model as in step 2, I added some code to use Jackson to convert it into a JSON String first: -

   
   //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);```
   

6. This time When I attempt to bind this to my JavaScript variable, the object looks like this when I debug in my browser: -

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

The JSON now looks valid, but all the quotes are escaped and it now throws a different exception: -

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

I feel that if the JSON string contained actual quotes instead of " the Map would successfully bind to my variable. I would appreciate any advice as to how to deal with this. Many thanks for reading.

EDIT: Screenshot of error added below: -

Answer 1

I did eventually get round this problem and so am offering a solution in case it helps anyone else. However, I feel that the solution is a bit 'hacky' and so would welcome any further answers that improve on this or offer a more elegant solution.

The problem was in the way I was trying to retrieve my map from the Model and assign to a JavaScript variable. Initially, I was trying this: -

var skillsMapRawString = [[${skillsMapJson}]];

The trouble is that this way of referencing skillsMapJson forces JavaScript to treat it as an Object and it cannot deal with the encoding issue described in the original post when attempting to deserialize it into JSON. The above line therefore threw the exception "unexpected token &".

By adding single quotes around the object reference, JavaScript is forced to treat skillsMapJson as a String and not an object: -

var skillsMapRawString = '[[${skillsMapJson}]]';

The above variable assignment now works successfully, but we still have the problem that it contains encoded quotes which prevent it being parsed to a JSON Object. This is where it feels like a bit of a hack, because I got round this by doing a global replace on the String: -

var skillsMapJSONString = skillsMapRawString.replace(/"/g, "\"");

Having replaced the encoded sections that were causing problems before, the String can now be parsed as JSON: -

var skillsMapParsed = JSON.parse(skillsMapJSONString);

And finally, I have my map of lists successfully assigned to a JavaScript variable! :)

Answer 2

Symbols """ and similar are HTML escapes. So your info is HTML escaped. You can unescape it back by using class org.apache.commons.text.StringEscapeUtils from the library apache.commons/commons-text. The info found at: How to unescape HTML character entities in Java?