Вызов метода для переменной JavaScript, переданной с использованием Thymeleaf

Question

Я передаю объект ArrayList, содержащий адреса из моего контроллера, в представление JavaScript с помощью Thymeleaf. Я пытаюсь перебрать этот список и отправляю запрос в 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 ({ тип: "GET", URL: "https://maps.googleapis.com/maps/api/geocode/json?address=" +

Я вижу, что мой список адресов передается, но не знаю, почему я не могу получить длину списка для моего цикла.

Я пытался

 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(

Документация

Answer 1

используя этот код, я смог получить переданный элемент, поместить его в список и перебрать список.

           /*<![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',{ Титулы: {

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

Answer 2

Вы не можете смешивать переменные Javascript и Thymeleaf. В этом коде, например:

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

Вы определяете i в javascript и ожидаете, что Thymeleaf узнает, что означает i в следующей строке кода: console.log([[${locations[i]}]]). i не определено, поэтому ничего не распечатывается. Поскольку у вас уже есть список мест на данный момент:

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

С этого момента вы должны иметь дело только с переменными javascript. Этот код будет работать:

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

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

  /*]]>*/
</script>