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.
Arthur WangAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
The push() method of arrays does take multiple arguments, but acts like you've made a separate call for each one individually.

Putting a colon in a string doesn't make a key/value pair. So locations[0] is just the string "lat: 37.09024".

What you want is to push an object to the array, so here's an object literal:
locations.push({lat: lat, lng: lng});

Open in new window

More info:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Arthur WangAuthor Commented:
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?
0
rrzCommented:
Do you still need help with the JSP?
0
David S.Commented:
You're welcome Arthur. Perhaps rrz can help you with the JSP portion, since that's outside my areas of expertise.
0
Arthur WangAuthor Commented:
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;
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.