asked on

how to pass session object parameters to javascript variables

I am trying to pass the object array which each object contain lat and lng from session bean to the javascrip inside a jsp. however, it sounds like an easy task, but I just got stuck here.

From a w3c testing, it can print the correct string in javascript.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to add a new element to the array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = [];
document.getElementById("demo").innerHTML = fruits;
var lat = 123;
var lng = 456;

function myFunction() {
   
    fruits.push(" lat: "+ lat + ", lng: " + lng);
    
    lat = 789;
    lng = 1012;
    fruits.push(" lat: "+ lat + ", lng: " + lng);
    document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Open in new window

but it does not work the same way when I use the same idea to push the real lat and lng to display the map:

Below, the first block of code works, but the second block does NOT. the only difference between them is to pass lat and lng into an array and then pass the array element to the location varaible.

<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <div id="demo"></div>

    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: 37.09024, lng: -95.712891};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=yourAPIKEY&callback=initMap">
    </script>

<script>

    var locations = [];
    var lat = 37.09024;
    var lng = -95.712891;

    locations.push("lat:"+lat + " ,lng:" +lng);
    lat = 38.123;
    lng = -95.465

    locations.toString();
    document.getElementById('demo').innerHTML = locations;

</script>


  </body>
</html>

Open in new window

<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <div id="demo"></div>

    <script>
    
    var locations = [];
    var lat = 37.09024;
    var lng = -95.712891;

    locations.push("lat: "+lat + ", lng: " +lng);
    locations.toString();
    document.getElementById('demo').innerHTML = locations;
    
    
    
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {locations[0]};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YourAPIKey&callback=initMap">
    </script>


  </body>
</html>

Open in new window

the reason I have to do this is because I have to pass an array List of lat and lng from session bean to this google geo map. seems like this is the only way to hook up with their javascript.

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Arthur Wang

ASKER

David,

Thanks for the comment, it's really helpful. Now i am able to display the data based on your solution, however, I just can not get it working with a real array list passed from the session bean.

below is my code for testing:

<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>Zip Map</h3>
    <!--The div element for the map -->
 <div id="map"></div>    
 <div id="demo"></div>
     
 <script>
 var locations = [];
 var lat; 
 var lng;
 <c:forEach var = "locationBean" items = "${locationList}"> 
 lat = <c:out value="${locationBean.lat}"/>;
 lng = <c:out value="${locationBean.lng}"/>
 locations.push({lat: lat, lng: lng});
 </c:forEach>  
 
    var json_data = JSON.stringify(locations);
    document.getElementById('demo').innerHTML = json_data;

</script> 
    
  </body>
</html>

Open in new window

locationList is an array List of LocationBean. the detail of LocationBean is as below:

package com.xxx.xxx.bean;

public class LocationBean {
	
	private String address = null;
	private String geoResponse = null;
	private String lat = null;
	private String lng = null;
	private String formatedAddress = null;
	
	/**
	 * @return the address
	 */
	public String getAddress() {
		return address;
	}
	/**
	 * @param address the address to set
	 */
	public void setAddress(String address) {
		this.address = address;
	}
	/**
	 * @return the geoResponse
	 */
	public String getGeoResponse() {
		return geoResponse;
	}
	/**
	 * @param geoResponse the geoResponse to set
	 */
	public void setGeoResponse(String geoResponse) {
		this.geoResponse = geoResponse;
	}
	/**
	 * @return the lat
	 */
	public String getLat() {
		return lat;
	}
	/**
	 * @param lat the lat to set
	 */
	public void setLat(String lat) {
		this.lat = lat;
	}
	/**
	 * @return the lng
	 */
	public String getLng() {
		return lng;
	}
	/**
	 * @param lng the lng to set
	 */
	public void setLng(String lng) {
		this.lng = lng;
	}
	/**
	 * @return the formatedAddress
	 */
	public String getFormatedAddress() {
		return formatedAddress;
	}
	/**
	 * @param formatedAddress the formatedAddress to set
	 */
	public void setFormatedAddress(String formatedAddress) {
		this.formatedAddress = formatedAddress;
	}
	
	
}

Open in new window

I am able to print out every values of the LocationBean object from the array List----locationList at the server console before passing it to the javascriplt such that I can make sure each object is not empty. but I am not able to figure out why the page does not print out the the array. From the two sample codes in my original qustion, I assign numbers to lat, lng and push them to the array in javascript.

for example:

var lat = 37.09024;
var lng = -95.712891;
locations.push({lat:lat, lng: lng });

there is no problem to dispay this array (locations) now based on your instructionl, but how come to assign value from session bean does not show up on the page?

lat = <c:out value="${locationBean.lat}"/>;
lng = <c:out value="${locationBean.lng}"/>
locations.push({lat: lat, lng: lng});

do I need to convert the value of <c:out value="${locationBean.lat}"/> into double before assign it to lat?

rrz

Do you still need help with the JSP?

David S.

You're welcome Arthur. Perhaps rrz can help you with the JSP portion, since that's outside my areas of expertise.

Arthur Wang

ASKER

Thanks RRZ,

Sorry for the late response, after I tried to change the data type of the lat and lng from String into Double in the LocationBean class, the problem solved.

private Double lat = null;
private Double lng = null;