Javascript iterates map of map

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 LA开发者_如何学编程KE 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.

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);  
    });
});​

You could do this with nested calls to $.map, which transforms an object or array into an array:

// Iterate over each object containing cities, with "state" as the key:
var html = $.map(data, function(cities, state) {
    // Within each state, iterate over each city, retrieving html for the inner <li>s
    // call .join("") at the end to turn the array of list items into a string.
    var listItems = $.map(cities, function(id, city) {
        return "<li><p>City: <a id='" + id + "' href='#'>" + city + "</a></p></li>";
    }).join("");

    // Build the unordered list using the current state concatenated with the 
    // <li>s we created above.
    return "<ul id='state_" + state + "'>" + listItems + "</ul>";
}).join("");
// Again, call .join("") to turn the entire <ul> into a string.

$("body").append(html);

Example: http://jsfiddle.net/andrewwhitaker/5xpBL/

As for the event handler, why not use delegate instead of attaching each event handler?:

$("body").delegate("ul[id^='state_'] a", "click", function (e) {
    callBackend(this);
});

Where body should probably be replaced with whatever container you're appending the uls to.

• $.map iterates over an object or array (an object in this case). The arguments to the callback function are the value followed by the key. In your case, the value is cities and the key is state for the outer $.map.
• Within the outer $.map call, there is an inner call that iterates over each state's cities. In this function, the first argument is the id of the city, while the second is the city name.
• After each call to $.map, .join("") is called. This takes the array built by $.map and turns it into an HTML string. The inner result is used as part of building the outer result (the ul).
• At the end of the outer $.map, the entire HTML string is appended.