Javascript carte itère de carte

Question

Dans un premier temps j'ai cette mise en page:

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

sur la page jsp et je dois charger cette carte JSON de carte à la mise en page.

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

}

Le résultat serait finalement comme ceci:

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

Il liste le nom de la ville et l'ID d'emplacement pour chaque zone d'état. Il y a un événement onclick pour chaque lien dans la balise "li". La fonction click va déclencher un appel backend qui envoie l'identifiant de localisation, qui sera l'identifiant de la balise, dans la requête. Recherche de cartes itérées, j'ai trouvé le jQuery.each() Par conséquent, j'ai écrit le javascript suivant pour remplir les listes de désordre, "ul". Essentiellement, j'ai besoin d'itérer l'objet de carte JSON pour remplir la liste. Je n'aime pas particulièrement imbriquer chaque fonction avec des événements de clic. Malheureusement, rien n'est ajouté et je n'ai pas compris pourquoi. Toute aide serait grandement appréciée.

Answer 1

Jetez un oeil à ce

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

Vous pouvez le faire avec des appels imbriqués à $.map, qui transforme un objet ou un tableau dans un tableau:

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

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

En ce qui concerne le gestionnaire d'événements, pourquoi ne pas utiliser delegate au lieu d'attacher chaque gestionnaire d'événement ?:

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

Où body devrait probablement être remplacé par ce que vous contenant les annexant ul s à.

---

Notes:

• $.map itère sur un objet ou d'une matrice (un objet dans ce cas). Les arguments de la fonction de rappel sont la valeur suivie par la clé. Dans votre cas, la valeur est cities et la clé est state pour l'extérieur $.map.
• Dans l'appel externe $.map, il y a un appel interne qui itère sur les villes de chaque état. Dans cette fonction, le premier argument est le id de la ville, tandis que le second est le nom de la ville. Après chaque appel à $.map, .join("") est appelée.Cela prend le tableau construit par $.map et le transforme en une chaîne HTML. Le résultat interne est utilisé dans le cadre de la construction du résultat externe (le ul).
• À la fin du $.map extérieur, la chaîne HTML entière est ajoutée.