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

Question

I am passing an ArrayList object containing addresses from my controller into JavaScript view using Thymeleaf. I am attempting to loop through this list and sending a request to google maps geocding api. My issue is in my loop the .length or .size() are not working on this variable. I do know the object is passing to the view but I dont know why the rest of the code is not running. this is my actual JavaScript code.

    <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

and here is what i am seeing when i inspect the code

       /*<![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({ type: "GET", url: " https://maps.googleapis.com/maps/api/geocode/json?address= " +

i can see that my list of addresses is being passed in but do not know why i cant get the length of the list for my loop.

I have tried

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

but i is not recognized and is not pulling anything out of this list. here is page inspection.

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

documentation

Answer 1

You can't mix Javascript and Thymeleaf variables. In this code for example:

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

You are defining i in the javascript and expecting Thymeleaf to know what i mean in the next line of code: console.log([[${locations[i]}]]) . i is undefined, so nothing is printed out. Since you already have your list of locations at this point:

var locations = [[${locations}]];

From then on, you should only be dealing with javascript variables. This code will work:

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

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

  /*]]>*/
</script>

Answer 2

using this code i was able to get the passed in element and put into a list and loop over the list.

           /*<![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++){

axios.get(' https://maps.googleapis.com/maps/api/geocode/json ',{ params:{

     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});
 })
 }
 }