的Javascript迭代地圖

Question

的地圖最初，我有這樣的佈局：

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

在JSP頁面中，我需要地圖的這個JSON地圖加載佈局。

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" 
} 

}

的最終結果會是這樣的：

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

它會列出每個國家地區的城市名稱和位置ID。 「li」標籤中的每個鏈接都有一個onclick事件。點擊功能將觸發一些後端調用，在請求中發送位置標識，該位置標識將作爲標籤的標識。

查找迭代映射，我找到了jQuery.each()因此，我寫了下面的JavaScript來填充unorder列表「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); 
    }); 

本質上，我需要迭代JSON映射對象來填充列表。我不特別喜歡用任何點擊事件來嵌套每個函數。

不幸的是，沒有任何東西正在追加，我無法弄清楚爲什麼。任何幫助將不勝感激。

Answer 1

看看這個

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

Answer 2

你可以嵌套調用$.map，其將一個對象或數組的數組做到這一點：

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

例：http://jsfiddle.net/andrewwhitaker/5xpBL/

至於事件處理程序，爲什麼不使用delegate而不是附加每個事件處理程序?:的

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

凡body或許應該與任何容器要追加的ul s到被替換。

---

注：

• $.map遍歷對象或陣列（在此情況下的對象）。回調函數的參數是鍵的值。在你的情況下，值爲cities，關鍵是state外$.map。
• 在外部$.map調用中，有一個內部調用遍歷每個州的城市。在這個函數中，第一個參數是城市的id，而第二個參數是城市名稱。
• 在每次致電$.map後，調用.join("")。這需要$.map構建的數組，並將其轉換爲HTML字符串。內部結果被用作構建外部結果的一部分（ul）。
• 在外部$.map的末尾，會附加整個HTML字符串。