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

【问题标题】：How to join Enum with JavaScript in Spring-Boot application如何在 Spring-Boot 应用程序中使用 JavaScript 加入枚举
【发布时间】：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: [&quot;Income&quot;,&quot;Expense&quot;]

当我尝试通过 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' ]?

标签： javascript java json spring-boot

【解决方案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。