Question

我试图在javascript中使用Spring变量：

Map<String, List<String>> states;

我找到了一些信息here

所以我试过了：

<script th:inline="javascript">
  /*<![CDATA[*/ 
    var xxx = ${states};
    console.log(xxx);
  /*]]>*/
</script>

在我的浏览器的源标签中，我有类似的内容：

var xxx = {STATE1=[a, b, c, d]};
console.log(xxx);

，错误是：Uncaught SyntaxError: Invalid shorthand property initializer。

我也尝试过：var xxx = /*[[${states}]]*/ 'foo';如果我打印console.log(xxx)，我就会'foo'。

Answer 1

此错误是由于{STATE1=[a, b, c, d]}无效的Javascript对象造成的。

解释非常简单：您已经看到服务器端呈现的产品（您使用Thymeleaf作为胖子，我可以通过th:inline标记建议）。因此，在服务器上，您的地图对象将呈现为{STATE1=[a, b, c, d]}字符串。在您的客户端（浏览器）上，您将获得包含此字符串的页面，没有别的。已经没有任何Java对象了。只是字符串。并且此字符串是Javascript中对象的初始化无效。

所以你根本不能以这种方式使用地图。您无法使用JSON.parse解析此问题，因为它是无效的JSON（应该使用:代替=）。

希望这有帮助！

P.S。如果您尝试在Javascript中将=替换为:，它将以您预期的方式工作：数组[a, b, c, d]将被视为名为{{1的变量数组}}，a，b和c因此您必须在d中对其进行处理。但我建议抛弃这个想法并重新思考你的方法。它不是应该使用的方式。

Answer 2

我用你的评论解决了我的问题：

1）缺少单引号：

<script th:inline="javascript">
  /*<![CDATA[*/ 
    var xxx = '${states}';
    console.log(xxx);
  /*]]>*/
</script>

2）必须解析对象：

  var hashmap = $.parseJSON(xxx);

3）在我需要序列化我的对象之前（这不是ajax调用所以我需要手动序列化）：

Map<String, List<String>> states...
  model.addAttribute("states", new ObjectMapper().writeValueAsString(states));

所以现在我能够阅读我的对象：

var myList = hashmap['STATE1'];
console.log(myList )

将打印[a, b, c, d]，我可以循环播放：

for(i in myList ){
  console.log(myList[i]);
}

在javascript中使用Spring变量

2 个答案: