使用在JavaScript

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

我用您的意見解決我的問題在我需要序列化我的對象之前（這不是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]); 
} 

Answer 2

此錯誤是由於{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]將被視爲一個名稱爲a,b,c和d的變量數組，因此您必須將其忽略''。但我建議放棄這個想法，並重新思考你的方法。這不是它應該使用的方式。

1）缺少的單引號：

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

2）的對象必須在這樣解析：

var hashmap = $.parseJSON(xxx); 

3）又