thymeleaf

thymeleaf - javascritp

controller

package com.mysite.app;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.mysite.sbb.user.SiteUser;

@Controller
public class HelloController {
    @GetMapping("/hello")
    public String hello(Model model) {
        Map<String, String> user = new HashMap<>();
        user.put("id", "1");
        user.put("userid", "hong");     
        model.addAttribute("user",user);

        return "hello";
    }
}

html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>hello.html</h1>
<ul>
    <li th:text="${user.id}"></li>
    <li th:text="${user.userid}"></li>
</ul>
<script>
    const id = '[[${user.id}]]';
    const userid = '[[${user.userid}]]';
    const userid2 = /*[[${user.userid}]]*/
    //const user = '[[${user}]]'; // error
    console.log(id);
    console.log(userid);
    console.log(userid2);   
    //console.log(user);    
</script>

<script th:inline="javascript">
    const id2 = [[${user.id}]];
    const userid3 = [[${user.userid}]];
    const userid4 = /*[[${user.userid}]]*/
    const user2 = [[${user}]];
    console.log(id2);
    console.log(userid3);
    console.log(userid4);   
    console.log(user2);
    console.log(user2['id']);

</script>
</body>
</html>