Javascript iterates map of map

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.

ShankarSangoli · Accepted Answer · 2012-06-08 16:59:22Z

2

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

edited Jun 8, 2012 at 16:59

answered Jul 29, 2011 at 21:30

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JohnnyBeGood Over a year ago

Thank you both for answering and introduce me to jsfiddle.

Andrew Whitaker · Accepted Answer · 2011-07-29 21:57:59Z

1

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.

Notes:

$.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.

edited Jul 29, 2011 at 21:57

answered Jul 29, 2011 at 21:41

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

2 Comments

JohnnyBeGood Over a year ago

Sorry for the late response. I was trying to reproduce your code. I really like the idea of using $.map. That's really neat. Thank you for the great write up. Unfortunately, I needed the uls on my jsp are static as I used them as anchor for my page. I wish I can set both your the answer as my default but the answer above really hit the mark. But you definitely have a better explanation.

Andrew Whitaker Over a year ago

@JohnnyBeGood: No problem at all. The important thing is that you've got it working :). And actually after looking at your question again I totally missed the mark by generating the uls, so that's my bad.

Collectives™ on Stack Overflow

Javascript iterates map of map

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related