对使用Thymeleaf传入的JavaScript变量调用方法

我使用Thymeleaf将包含控制器地址的ArrayList对象传递到JavaScript视图中。我正在尝试循环浏览这个列表，并向google maps geocding api发送一个请求。我的问题是循环中的.length或.size（）不适用于此变量。我知道对象正在传递给视图，但我不知道为什么其余的代码没有运行。 这是我实际的JavaScript代码

    <script th:inline="javascript">


       /*<![CDATA[*/
//list of locations passed from controller to view using thymeleaf
var locations = [[${locations}]];
// .length not working on variable
console.log(locations.size());
var size = locations.length;
//loop through user locations .length and .size() not working
for(var i=0; i < locations.length; i++){
    console.log(locations[i])
    //make call to api using location

/*
这是我在检查代码时看到的

       /*<![CDATA[*/
//list of locations passed from controller to view using thymeleaf
var locations = ["12 Main St bonne terre mo 63628"," 100 division st bonne terre mo 63628","4345 fyler ave st louis mo 63116","12 Main St bonne terre mo 63628"];
// .length method not running on variable
console.log(locations.size());
var size = locations.length;
//loop through user locations .length method not working
for(var i=0; i < locations.length; i++){
    console.log(locations[i])
    //make call to api to get activity.location coordinates

/*
$.ajax({
键入：“获取”，
网址：“+

我可以看到我的地址列表正在传入，但不知道为什么我无法获得循环列表的长度

我试过了

 for(var i=0; i < [[${locations.size()}]]; i++){
    console.log([[${locations[i]}]])

for（var i=0；i<[${locations.size（）}]]；i++）{
console.log（[${locations[i]}]]

但我没有被认出来，也没有从这份名单中拿出任何东西。
这里是页面检查

//loop through user locations .length and .size() not working
for(var i=0; i < 4; i++){
    console.log(

//遍历用户位置。length和.size（）无效
对于（变量i=0；i<4；i++）{
console.log(

您不能混合使用Javascript和Thymeleaf变量。例如，在此代码中：

for(var i=0; i < [[${locations.size()}]]; i++){
    console.log([[${locations[i]}]])

从那时起，您应该只处理javascript变量

<script th:inline="javascript">
  /*<![CDATA[*/
  var locations = /*[[${locations}]]*/ [];

  for(var i=0; i < locations.length; i++){
    console.log(locations[i]);
  }

  /*]]>*/
</script>


/**/
使用此代码，我能够获得传入的元素并将其放入列表中，然后在列表上循环

           /*<![CDATA[*/
//list of locations passed from controller to view using thymeleaf






var locations = [];

/*[# th:each="n : ${locations}"]*/

    locations.push("[(${n})]");
    /*[/]*/

执行
console.log（locations）
时会得到什么？我得到一个包含地址列表的数组，但使用的任何方法或属性都类似于.length或.size（）未被识别。我知道这与Thymeleaf不接受Javascript局部变量有关，但似乎无法理解在没有局部变量的情况下如何完成循环。您好，感谢您的输入这实际上是我在代码中输入的内容，但即使我将该列表放入Javascript变量locations.length或lo中阳离子.大小（）不适用于循环。就好像即使我在该变量中有它，它仍然被视为thymeleaf。我用一个数据列表测试了它，并验证了它的有效性，因此还有其他事情在进行。你能直接将代码粘贴到一个单独的块中并验证单个代码块吗？至于
locations.size（）
--这不是一个JavaScript函数，因此永远不会起作用。我找到了一个我没有使用的解决方案。size（）使用了。长度。我确实像你在上面的第一个剪贴中那样发布了代码，有很多评论，所以可能让你读起来很困惑，对不起。我不知道它是否是thymeleaf的版本，但我必须为每个循环使用th；，并将列表中的每个元素推到一个空列表中，然后以这种方式使用。我发布了s我在下面找到的解决方案非常感谢您的帮助。
           /*<![CDATA[*/
//list of locations passed from controller to view using thymeleaf






var locations = [];

/*[# th:each="n : ${locations}"]*/

    locations.push("[(${n})]");
    /*[/]*/

//loop through user locations 
for(var i = 0; i < locations.length; i++){

     address:locations[i],
      key:'AIzaSyC0_mpWB_nOm_gsjWwbgD_2EXYsnYTD6Jg'
    }
  })


  //using response from api to add markers to map
  .then(function(response){
    console.log(response)
    var lat = response.data.results[0].geometry.location.lat;
    var lng = response.data.results[0].geometry.location.lng;



    addMarker({lat:lat,lng:lng});
 })
 }
 }