Question

Initially I have this layout:

<ul id="state_${abbr}"></ul>

on the jsp page and I need to load this JSON map of map to the layout.

coverage.phone.data = {
"CA" : {
    "LOS ANGELES" : "1111", 
    "TORRANCE" : "2222", 
    "SANTA MONICA" : "3333"
}, 
"UT" : {
    "APPLE VALLEY" : "4444",
    "SALT LAKE CITY" : "5555"
}, 
"NV" : {
    "BOULDER CITY" : "6666", 
    "LAS VEGAS" : "7777",
    "CARSON CITY" : "8888"
}

}

The finally result would be like this:

<ul id="state_CA">
    <li><p>City: <a id="1111" href="#">LOS ANGELES</a></p></li>
    <li><p>City: <a id="2222" href="#">TORRANCE</a></p></li>
    <li><p>City: <a id="3333" href="#">SANTA MONICA</a></p></li>
</ul>
<ul id="state_UT">
    <li><p>City: <a id="4444" href="#">APPLE VALLEY</a></p></li>
    <li><p>City: <a id="5555" href="#">SALT LAKE CITY</a></p></li>
</ul>
<ul id="state_NV">
    <li><p>City: <a id="6666" href="#">BOULDER CITY</a></p></li>
    <li><p>City: <a id="7777" href="#">LAS VEGAS</a></p></li>
    <li><p>City: <a id="8888" href="#">CARSON CITY</a></p></li>
</ul>

It will list the city name and location id for each state area. There is an onclick event for each link in the “li” tag. The click function will trigger some backend call that sends the location id, which will be the id of the a tag, in the request.

Looking up iterate maps, I found the jQuery.each() Hence, I wrote the following javascript to fill the unorder lists, “ul”.

// create the li and click function    
var createLink = function(map) {
        var link = ""; 
        $.each(map, function(key, value){
            link += "<li><p>City: <a id=\"" + value + "\" href=\"#\">" + key + "</a></p></li>";
            $("#"+value).click(function(){
                callBackend(this); 
            }); 
        }); 
        return link; 
    };
    // append the li(s) to the ul tags
    $.each(coverage.phone.data, function(i, val){
        var result = createLink(val);
        $("#state_"+i).append(result);  
    });

Essentially, I need to iterate the JSON map object to fill the list. I don’t particularly like to nested the each functions with any click events.

Unfortunately, nothing is being appended and I couldn’t figure out why. Any help would be greatly appreciated.

Answer 1

Take a look at this

http://jsfiddle.net/HsZp6/4/

$(function(){ 
    / create the li and click function    
    var createLink = function(map) {
        var link = ""; 
        $.each(map, function(key, value){
            link += "<li><p>City: <a id=\"" + value + "\" href=\"#\">" + key + "</a></p></li>";
            $("#"+value).click(function(){
                callBackend(this); 
            }); 
        }); 
        return link; 
    };
    // append the li(s) to the ul tags
    $.each(coverage.phone.data, function(i, val){
        var result = createLink(val);
        $("#state_"+i).append(result);  
    });
});​