Problème d'incrémentation trop rapide

Par keiko, il y a 10 ans

Javascript

Bonjour,

J'ai un léger soucis surêment très simple à résoudre pour ceux qui l'ont déjà eu !

Je réalise à titre professionnel une carte interactive des départements de France [...blabla...] . Je vous épargne les détails.
A côtès de cette carte, je souhaite lister tous les départements à l'aide d'un tableau donc je vous donne un extrait :

var departements = [ {name : 'Ain', slug: 'ain'}, {name : 'Aisne', slug: 'aisne'}, {name : 'Allier', slug: 'allier'}, {name : 'Alpes-de-Haute-Provence', slug: 'alpes-de-haute-provence'}, {name : 'Hautes-Alpes', slug: 'hautes-alpes'}, {name : 'Alpes-Maritimes', slug: 'alpes-maritimes'}, {name : 'Ardèche', slug: 'ardeche'}, {name : 'Ardennes', slug: 'ardennes'}, //Ce tableau est fonctionnel puisqu'il ... fonctionne ( sur la carte )

Seulement voila, la partie en JQuery qui est censée lister les départements est celle-ci (code extrêmement complexe, attention aux yeux ;) ) :

for (var key in departements) { $('.liste_departements').append('<div class="ligne_departement">'); //it works $('.ligne_departement').html(departements[key].name); //HELP //lignes de test console.log(key); //fonctionne alert(departements[key].name); //fonctionne }

Mon erreur : La valeur s'incrémente comme je peux le constater dans la console ou sur les alerts, mais dans le html, il est toujours écrit le même département.
En d'autre terme, j'ai fais un test en remplaçant le "for(var key...)" par un" if(var i=1 ; i<10...)" , et le html m'affiche toujours la derniere incrémentation. Par exemple, si je choisis que "i" va jusqu'a 4, alors j'aurai d'afficher "Alpes-de-Haute-Provence" quatre fois.

En espérant avoir été clair,
et en vous remerciant d'avance pour le temps que vous allez prendre pour m'aider,
Je vous souhaite une agréable fin de journée ;) .

PS: si vous avez besoin d'autres éléments pour y voir plus clair, n'hésitez pas !

5 réponses

Huggy, il y a 10 ans

Essaye plutôt avec for .. of
voir ici

keiko, il y a 10 ans

Merci pour ta réponse Huggy, malheureusement, cela ne résoud pas le problème.
Voici néanmoins le code avec ce léger changement :

for (var key of departements) { $('.liste_departements').append('<div class="ligne_departement">'); $('.ligne_departement').html(departements[key].name); }
Huggy, il y a 10 ans

avec le for of, tu obtiens directement un élément du tableau

for (var dep of departements) { $('.liste_departements').append('<div class="ligne_departement">'); $('.ligne_departement').html(dep.name); }
antho07, il y a 10 ans

Bonjour, essayons de comprendre un peu ce qu'il se passe avec ce code :

for (var key of departements) { $('.liste_departements').append('<div class="ligne_departement">'); $('.ligne_departement').html(departements[key].name); }

Simplifions en imaginant que le tableau est celui ci [{name:"A"},{name:"B"},{name:"C"}];

On boucle;

key = 0;

On a donc dans la page :

<div class="liste_departements"> </div>

On exécute :

$('.liste_departements').append('<div class="ligne_departement">');

On a donc

<div class="liste_departements"> <div class="ligne_departement"> </div> </div>

On exécute :

$('.ligne_departement').html(dep.name);

On prend donc tous les élements de classe ligne_departement et remplace le html par dep[key].name donc ici A.
Cela donne :

<div class="liste_departements"> <div class="ligne_departement"> A</div> </div>

On poursuit la boucle :

key = 1

$('.liste_departements').append('<div class="ligne_departement">');

On a donc

<div class="liste_departements"> <div class="ligne_departement"> A</div> <div class="ligne_departement"> </div> </div>

On exécute :

$('.ligne_departement').html(dep.name);

On prend donc tous les élements de classe ligne_departement et remplace le html par dep[key].name donc ici B.
Cela donne :

<div class="liste_departements"> <div class="ligne_departement"> B</div> // ET oui cette ligne répond aussi au sélecteur !! <div class="ligne_departement"> B</div> </div>

Je pense que tu as compris le problème :)

Pour le corriger il faut ajouter le nom du département en même temps que la div :

for (var key in departements) { $('.liste_departements').append('<div class="ligne_departement">'+departements[key].name+'</div>'); //it works }

Cordialement

keiko, il y a 10 ans

Hello,

-Merci huggy pour ces infos avec le for ..of, ça me sera bien utile !

-Antho07 : Excellentes explications ! Cela eclaircit très bien mon problème, qui est désormais réglé ! Je n'y ai pas pensé plus tôt, j'aurai du faire le pas-à-pas de la procédure !

Une fois de plus merci pour votre aide,
bonne journée !