Previous Page
Next Page

Hack 46. Display the Keys/Values from a Java HashMap on a Web Page

Connect to a Java object running on the server and use JavaScript to display a HashMap's contents on a web page.

This hack takes a java.util.HashMap containing the names of bike manufacturers keyed to their product codes and displays this information on a web page. The earlier hacks in this chapter introduced the reader to this web page, which Figure 5-2 shows.

A java.util.HashMap in Java is a hash table structure that contains keys pointing to values. Its JavaScript representation could look like {firstname: "Bruce", lastname:"Perry"}.

The place on the web page where we want to display these values looks like this in the HTML code:

<h3>Product codes</h3>
<div id="prodCodes"></div>

This code represents a subheading and a div element with the id prodCodes. When the web page loads, the code asks the server component for the contents of a Java HashMap. The code displays the Map keys followed by "::" then the Map values, as in "Specialized :: 0006," with a little styling added to boot. The server component and web page are set up and configured just as in "Integrate DWR into Your Java Web Application" [Hack #43]. To refresh your memory, here are the script tags that the web page uses, so that the application can use DWR and hacks5_1.js, which contains our own JavaScript:

<script type="text/javascript"   
<script type="text/javascript" src="/parkerriver/dwr/interface/JsBikeBean.js">
<script type="text/javascript" src="/parkerriver/dwr/interface/JsDate.js"></script>
<script type="text/javascript" src="/parkerriver/dwr/engine.js"></script>
<script type="text/javascript" src="/parkerriver/dwr/util.js"></script>

The code from hacks5_1.js calls a JsBikeBean method to display the converted HashMap's values inside the div element. Here is the Java code to which the bound JavaScript object JsBikeBean has access:

private static Map BIKE_INFO;
    static {
        BIKE_INFO = Collections.synchronizedMap(new HashMap(  ));

    public static Map getBikeInfo(  ) {
        return BIKE_INFO;

The getBikeInfo( ) method simply returns the Map with all these values.

A comprehensive real-world application might return a Map derived from an underlying database. Also, Map is the interface implemented by HashMap, so a HashMap is also a Map type in Java.

Traveling at the speed of light from the server to the browser code, here is the web page's underlying JavaScript:

//This method is called by the window.onload event handler
function setupMap(  ){
//"jsHashmap" is the JS object representation of a HashMap
function setProdCodes(jsHashmap){
    var div = document.getElementById("prodCodes");
    //remove old messages
    var tmpText;
    for(var prop in jsHashmap) {
        tmpText = prop + " :: "+ jsHashmap[prop];

getBikeInfo( ) returns the HashMap value and passes it as the parameter to the setProdCodes( ) function:

function setProdCodes(jsHashmap){...}

setProdCodes( ) represents the callback mechanism that DWR uses to exchange data between the server's return values and the web page's code.

The JavaScript code passes a callback function name as a parameter to the Java method. Make sure to leave out the parentheses when calling DWR-related methods in this manner. In other words, don't use:

JsBean.getBikeInfo(setProdCodes(  ));

The HashMap values that originated on the server manifest as the callback function's parameter. The jsHashmap parameter in setProdCodes(jsHashmap) contains the bike-maker names as keys and the product codes as values. The code gets a reference to the div within which this information will be displayed, then specifies the font size and color of the text:"purple";"0.9em";

The DWR framework does a lot of useful work for a script and an Ajax developer. The framework returns the hash table value in JSON format [Hack #7] as a JavaScript object.

The DWR framework returns a Java HashMap, for example, as:


As a result, the code can easily display the keys and values of the object using a for/in loop:

for(var prop in jsHashmap) {
    tmpText = prop + " :: "+ jsHashmap[prop];

The code writes the bike-maker names and product codes by displaying the key and value followed by a line break (br) tag:

/* i.e., jsHashmap["Trek"]returns "0001" */
tmpText = prop + " :: "+ jsHashmap[prop];

tmpText contains the line of text that the web page displays, as in "Trek :: 0001." During each iteration of the for/in loop, the code writes out a separate line representing a different bike company and product code.

"Use DWR to Populate an Ordered List from a Java Array" [Hack #47] dynamically generates an ordered or unordered list from Java values on the server.

Previous Page
Next Page