如何在 Spring-Boot 应用程序中使用 JavaScript 加入枚举

Posted 2023-02-27

【中文标题】如何在 Spring-Boot 应用程序中使用 JavaScript 加入枚举

【英文标题】：How to join Enum with JavaScript in Spring-Boot application

【发布时间】：2021-06-19 01:42:17

【问题描述】：

我是 javascript 的初学者，现在我正面临这样的问题。 我有一个枚举

@JsonFormat(shape = Shape.OBJECT)
public enum FinancialEventType 

  Income("Income"),
  Expense("Expense");
  
  private String code;
  
  private FinancialEventType(String code) 
    this.code = code;
  
  
  @JsonValue
  public String getCode() 
    return this.code;
  

我想通过 ModelAttribute（作为对象和 JSON）将枚举传递给我的视图

  @ModelAttribute()
  public void addAttributes(Model model) throws JsonProcessingException 
    String data1 = new ObjectMapper().writeValueAsString(FinancialEventType.values());
    
    model.addAttribute("data1", data1);
    model.addAttribute("eventTypes",     FinancialEventType.values());
  

在我看来我可以得到这些属性

  <script>
    var documentDate = "[[$documentDate]]";
    var eventTypes = "[[$eventTypes]]";
    var data1 = "[[$data1]]";
    console.log("data1: " + data1);
  </script>

但是“JSON”看起来有点奇怪：

data1: ["Income","Expense"]

当我尝试通过 JavaScript 生成下拉元素时

//Create and append the options
    for (var i = 0; i < data1.length; i++) 
        var option = document.createElement("option");
        option.value = data1[i];
        option.text = data1[i];
        selectList.appendChild(option);
    
    row.appendChild(cell);

生成的列表不是我想要的：

感谢您的建议 维托德

【问题讨论】：

正确的结果应该是[ 'Income', 'Expense' ]?

【参考方案1】：

改变这个：

var data1 = "[[$data1]]";

为此：

var data1 = [($data1)];

在 Thymeleaf 中使用 "[[ ]]" 等同于使用 th:text，Thymeleaf 是对文本进行转义（也就是说，在 html 等效的 &quot 中转换符号 '）。因此，请改用“[( )]”，相当于 th:utext。

这仅适用于 Thymeleaf 版本 3，不适用于版本 2。

来源：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#inlining

【讨论】：

谢谢，但是使用这种语法，脚本试图评估这个表达式var data1 = "["Income","Expense"]";，这会导致：Uncaught SyntaxError: Unexpected identifier instead of var data1 = "['Income','Expense']";

去掉这里的双引号：“[($data1)]”，并保持这样的[($data1)]。这将留下 var data1 = ["Income","Expense"]，这在 JS 中是完全有效的。我编辑了我的答案以纠正这个问题。在 JS 中 ["Income","Expense"] 与 ['Income','Expense'] 一样有效

顺便说一句，您在 HTML 选择中收到的错误是因为您用引号将数组括起来。表达式“['Income','Expense']”是错误的，因为 data1 将是一个字符串。没有双引号，它将是一个数组。这就是为什么 data1.length 应该是 20 并且你有这么多选择，而它应该只有 2。