[英]Calling method on JavaScript variable passed in using Thymeleaf
我正在使用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({类型:“ GET”,网址:“ 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(
您不能混合使用Javascript和Thymeleaf变量。 例如,在此代码中:
for(var i=0; i < [[${locations.size()}]]; i++){
console.log([[${locations[i]}]])
您正在javascript中定义i
,并希望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>
使用此代码,我能够获取传入的元素并放入列表中并遍历该列表。
/*<![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});
})
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.