boucle $.each et append en JQuery

**Markos22** · 30/10/2016, 19h06

Bonjour,

J'ai un formulaire qui contient un champ code postal et une liste déroulante pour les villes. J'ai un fichier JSON libellé comme suit :

Code json :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
{
  "10000": {
    "Libelle_acheminement": "TROYES"
  },
  "10100": {
    "Libelle_acheminement": "GELANNES"
  },
  "10110": {
    "Libelle_acheminement": "POLISY"
  },...

Et voici le code de ma page :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Essai codes postaux</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<form action="#">
			<div class="form-group">
				<label for="nom">Nom</label>
				<input type="text" class="form-control" name="nom" id="nom">
			</div>
			<div class="form-group">
				<label for="prenom">Prénom</label>
				<input type="text" class="form-control" name="prenom" id="prenom">
			</div>
			<div class="form-group" style="float: left;">
				<label for="cp">Code Postal</label>
				<input type="text" class="form-control" name="cp" id="cp">
			</div>
			<div class="form-group" style="margin-left: 200px">
				<label for="ville">Ville</label>
				<select class="form-control" id="ville"></select>
			</div>
			<input type="submit" value="envoi">
 
		</form>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>
                $(document).ready(function(){
                        $('#cp').change(function(){
                                $('#ville').html('');
                                $.getJSON('js/codes_postaux.json',function(data){
                                        $.each(data,function(key,value){
                                                if(key==$('#cp').val()){
                                                        $('#ville').append('<option value="'+value.Libelle_acheminement+'">'+value.Libelle_acheminement+'</option>');
                                                }
                                        });
                                });
                        });
                });
        </script>
</body>
</html>

Ça se passe presque bien, excepté un petit détail énervant et incompréhensible : ma liste déroulante ne contient qu'un seul élément : la dernière correspondance rencontrée dans le fichier json ! Je pensais que la méthode append() ajoutait un contenu à la fin de l'élément, sans effacer les autres. Ce n'est pas comme ça ?

Merci de vos suggestions.

**Markos22** · 30/10/2016, 19h27

Pardon d'avoir posté trop vite, j'ai trouvé l'erreur : Je suis parti d'un fichier CSV contenant une liste de codes postaux et les libellés d'acheminement correspondants. puis j'ai trouvé un site qui permet de le convertir en JSON : ici. J'ai trouvé que le résultat était sympathique, puisqu'il permettait de faire directement une recherche par code postal, car chaque code postal est un objet. Seulement, avec la conversion, il y a un effet indésirable : mon fichier CSV contient toutes les villes pour chaque code postal, mais le fichier JSON ne retient que la dernière.

Conclusion : le code est correct, mais c'est le fichier Json qui est mal foutu !

En sélectionnant "array", la structure est respectée. Mon code devient donc :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
		$(document).ready(function(){
			$('#cp').change(function(){
				$('#ville').html('');
				$.getJSON('js/codes_postaux.json',function(data){
					$.each(data,function(key,value){
						if(value.Code_postal==$('#cp').val()){
							$('#ville').append('<option value="'+value.Libelle_acheminement+'">'+value.Libelle_acheminement+'</option>');
						}
					});
				});
			});
		});
	</script>

Bon, bah, la question est résolue, alors.
J'espère que cela pourra servir à quelqu'un, je n'aurai pas posté pour rien... A bientôt

**Markos22** · 30/10/2016, 20h16

Hep ! C'est pas fini ! Ça fonctionne super bien comme exercice, dans l'abstrait, en HTML, mais dès qu'on soumet le formulaire, surprise !! Une erreur apparaît : la liste déroulante, bien affichée en JQuery, semble virtuelle : lorsque l'on soumet le formulaire, le champ ville (celui du "select" en JQuery) est "null". Quelqu'un saurait-il comment y remédier ?

...Oups ! Là encore, je laisse le dernier post pour qu'il serve à quelqu'un : erreur de débutant : j'ai oublié l'attribut "name" de mon "select" ! Pensez-y : c'est lui qui permet de transmettre la valeur sélectionnée au serveur. Ne confondez pas "id", qui sert à identifier l'élément, et "name", dont la principale fonction est de transmettre au serveur la valeur entrée par l'utilisateur dans l'élément du formulaire.

A bientôt ! ;-)

boucle $.each et append en JQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager