Javascript迭代map的map
Javascript迭代map的map
提问于 2011-07-30 05:18:55
最初我有这样的布局：
<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事件。点击函数将触发一些后端调用，该后端调用发送请求中的位置id，该位置id将是标签的id。
查找迭代映射，我找到了jQuery.each()，因此，我编写了以下javascript来填充无序列表"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 map对象来填充列表。我并不特别喜欢将每个函数嵌套在任何单击事件中。
不幸的是，没有附加任何东西，我不知道为什么。任何帮助都将不胜感激。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-07-30 05:30:39
看看这个
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);
});
});Stack Overflow用户
发布于 2011-07-30 05:41:33
您可以通过对$.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附加到的任何容器。
备注：
$.map遍历对象或数组(本例中为对象)。回调函数的参数是后跟键的值。在您的示例中，值为cities，外部$.map.- Within的键为
state。外部$.map调用有一个内部调用，它遍历每个州的城市。在此函数中，第一个参数是城市的id，第二个参数是城市名称。 - 每次调用
$.map后，都会调用.join("")。这将获取由$.map构建的数组并将其转换为HTML。内部结果用作构建外部结果的一部分(ul). - At位于外部
$.map的末尾，整个HTML字符串将被附加。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6879160
复制相关文章
相似问题
腾讯云开发者
