Tableau associatif : création et tri

**Tchupacabra** · 18/10/2008, 19h02

Bonjour à toutes et à tous,

1/ la conception
je n'arrive pas à concevoir un tableau associatif tel un tableur du type :

n° | cp | ville
1 | 72000 | Le Mans
2 | 72190 | Coulaines
3 | 44000 | Nantes

où n° serait l'indice du tableau js principal.

J'ai essayé :

Code :

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

1
2
3
4
var aDatas = new Array();
aDatas[0]= new Array("cp"=>72000, "ville"=>"Le Mans");
aDatas[1]= new Array("cp"=>72190, "ville"=>"Coulaines");
aDatas[2]= new Array("cp"=>44000, "ville"=>"Nantes");

mais ceci ne semble pas être correct...

2/ le triage
aussi par la suite j'aimerais trier ce tableau.
Comment faire ensuite pour trier ce tableau par le CP ou par la ville ?

Quelqu'un pourrait-il m'aider ?
Merci d'avance

@ bientôt

**Tchupacabra** · 18/10/2008, 20h03

bon pour la création du tableau, j'ai trouvé cette façon :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var aDatas = new Array();
aDatas[0] = new Array();
aDatas[0]['cp'] = 72000;
aDatas[0]['ville'] = "Le Mans";
 
aDatas[1] = new Array();
aDatas[1]['cp'] = 72190;
aDatas[1]['ville'] = "Coulaines";
 
aDatas[2] = new Array();
aDatas[2]['cp'] = 44000;
aDatas[2]['ville'] = "Nantes";

=> que je trouve super lourde...

Y aurait moyen de raccourcir tout ça ?

**Tchupacabra** · 19/10/2008, 09h54

bon, j'ai changé de méthode... à présent, j'utilise les objets dans un tableau principal...

Code :

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

1
2
3
4
5
6
7
var aVilles = new Array(
    {cp:'72000', nom:'Le Mans'},
    {cp:'72190', nom:'Coulaines'},
    {cp:'35000', nom:'Rennes'},
    {cp:'44000', nom:'Nantes'},
    {cp:'13000', nom:'Marseilles'}
    );

Cependant, j'ai encore un souci avec le tri sur le CP de la ville.
Avec le code suivant :

Code :

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
<script type="text/javascript">
 
var aVilles = new Array(
    {cp:'72000', nom:'Le Mans'},
    {cp:'72190', nom:'Coulaines'},
    {cp:'35000', nom:'Rennes'},
    {cp:'44000', nom:'Nantes'},
    {cp:'13000', nom:'Marseilles'}
    );
var aVillesByCP = aVilles;
var aVillesByNom = aVilles;
 
function sortByCP(a, b) {
    return ( a.cp < b.cp ) ? -1 : 1;
    if( a.cp === b.cp ) return 0;
}
function sortByName(a, b) {
    return ( a.nom < b.nom ) ? -1 : 1;
    if( a.nom === b.nom ) return 0;
}
aVillesByCP.sort(sortByCP);
aVillesByNom.sort(sortByName);
 
document.writeln('<p>---- aVillesByCP</p>');
for(key in aVillesByCP) {
    //alert(key+' donne '+aVillesByCP[key].cp);
    document.writeln('<p>'+key+' donne '+aVillesByCP[key].cp+'</p>');
}
 
document.writeln('<p>---- aVillesByNom</p>');
for(key in aVillesByNom) {
    //alert(key+' donne '+aVillesByNom[key].nom);
    document.writeln('<p>'+key+' donne '+aVillesByNom[key].nom+'</p>');
}
</script>

je ne comprends pas pourquoi j'obtiens ceci :

---- aVillesByCP
0 donne 72190
1 donne 72000
2 donne 13000
3 donne 44000
4 donne 35000

---- aVillesByNom
0 donne Coulaines
1 donne Le Mans
2 donne Marseilles
3 donne Nantes
4 donne Rennes

Vous remarquerez que le tri sur le CP n'est pas correct !
Mais pourquoi ?

**Auteur** · 19/10/2008, 11h02

bonjour,

Vous remarquerez que le tri sur le CP n'est pas correct !

Logique. Dans ton tableau :

Code :

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

1
2
3
4
5
6
7
var aVilles = new Array(
    {cp:'72000', nom:'Le Mans'},
    {cp:'72190', nom:'Coulaines'},
    {cp:'35000', nom:'Rennes'},
    {cp:'44000', nom:'Nantes'},
    {cp:'13000', nom:'Marseilles'}
    );

les valeurs de CP sont des chaines de caractères ! Donc ta fonction sortByCP() compare des chaines de caractères pas des nombres

Essaye comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
 
function sortByCP(a, b) 
{
    a = parseInt(a); // convertit une chaine de caractères en nombre
    b = parseInt(b);
 
    return ( a.cp < b.cp ) ? -1 : 1;
    if( a.cp === b.cp ) return 0;
}

Attention également à ta fonction qui compare le nom des villes : elle est sensible à la casse et aux caractères accentués

Autre remarque : évite document.write() (et pas document.writeln()), on a régulièrement des mauvaises surprises avec cette fonction si elle est mal utilisée

**Tchupacabra** · 19/10/2008, 11h15

ton code ne change malheureusement rien :

Code :

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
var aVilles = new Array(
		{cp:'72000', nom:'Le Mans'},
		{cp:'72190', nom:'Coulaines'},
		{cp:'35000', nom:'Rennes'},
		{cp:'08200', nom:'Sedan'},
		{cp:'44000', nom:'Nantes'},
		{cp:'13000', nom:'Marseilles'}
		);
function sortByCP(a, b) {
    a = parseInt(a.cp);
    b = parseInt(b.cp);
 
    return ( a < b ) ? -1 : 1;
    if( a === b ) return 0;
}
var aVillesByCP = aVilles.sort(sortByCP);

¤ le CP doit être une chaine car des CP peuvent commencer par 0 (ex: 08200 pour Sedan)
¤ le tri sur les noms des villes fonctionne bien alors pourquoi avec le CP, c'est différent ?

**Tchupacabra** · 19/10/2008, 11h27

j'ai également remarqué que le tri du CP et le même qu'avec le nom !

j'y comprends rien...

**bigboomshakala** · 21/10/2008, 16h24

Envoyé par Tchupacabra

bon je crois avoir compris le problème... reste à trouver la solution !

apparemment, ma "duplication" des tableaux à l'initialisation n'est pas correcte. J'ai l'impression que les variables aVillesByCP et aVillesByNom ne sont que des références vers le tableau source aVilles !
.

une remarque oubliée

c'est tout à fait normal. les objets en javascript sont affectés par référence. donc quand tu écris

Code :

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

1
2
3
4
5
var o = { name:"toto" };
var o_new = o;
alert(o_new.name); //toto
o.name = "pan!";
alert(o_new.name); //pan!

c'est ce qui nous permet d'utiliser des raccourcis du genre

Code :

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

1
2
var input = document.getElementById("monInput");
input.style.display = "none";

si l'affectation avait cloné l'objet alors le changement de style ce serait appliqué au clone (qui n'a pas été ajouté au document par un appendChild, donc que vous n'auriez jamais à l'écran) et pas à l'input d'id monInput. Or c'est cet input qui disparaît de l'écran avec ce script!

**bigboomshakala** · 21/10/2008, 16h29

j'oubliais aussi....

gare aux méthodes slice, concat et autres.
par exemple avec un array simple slice() réalise un "clone" du tableau, mais si le tableau contient des objets (tableaux ou autres) ceux-là ne sont copiés que par référence !! donc toute modif sur la copie affectera l'original puisqu'il s'agit du même objet. seul la copie du pointeur a été réalisé.

**Tchupacabra** · 22/10/2008, 12h30

un grand merci à vous tous pour votre aide et explications !

voici mon code fonctionnel :

Code :

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
48
49
50
51
52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
<!--
	var aVilles = new Array(
		{id:1, cp:'72000', nom:'Le Mans'},
		{id:2, cp:'50470', nom:'La Glacerie'},
		{id:3, cp:'68130', nom:'Altkirch'},
		{id:4, cp:'72190', nom:'Sargé-lès-le-Mans'},
		{id:5, cp:'72190', nom:'Coulaines'},
		{id:6, cp:'61000', nom:'Alençon'},
		{id:7, cp:'68640', nom:'Riespach'},
		{id:8, cp:'92170', nom:'Vanves'},
		{id:9, cp:'75016', nom:'Paris'},
		{id:10, cp:'44405', nom:'Rezé'},
		{id:11, cp:'61500', nom:'Sées'});
 
// tri du tableau par rapport au contenu du premier élément du second niveau
function tri(a, b) {
	return ( a[0] < b[0] ) ? -1 : 1;
	if( a[0] === b[0] ) return 0;
}
 
var aVillesByCP = new Array();
var aVillesByNom = new Array();
 
for(key in aVilles) {
	aVillesByCP.push(new Array(
		aVilles[parseInt(key)].cp, 
		aVilles[parseInt(key)].id, 
		aVilles[parseInt(key)].nom
	));
	aVillesByNom.push(new Array(
		aVilles[parseInt(key)].nom, 
		aVilles[parseInt(key)].id, 
		aVilles[parseInt(key)].cp
	));
}
 
aVillesByCP.sort(tri);
aVillesByNom.sort(tri);
 
//-->
</script>
</head>
 
<body>
</body>
</html>

@+

Tableau associatif : création et tri

JavaScript

Vue hybride

Discussions similaires

Partager

Partager