Tableau associatif : création et tri

Version imprimable

18/10/2008, 19h02
Tchupacabra

Tableau associatif : création et tri
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:

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

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

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 ?

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

Code:

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:

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 :

Citation:

---- 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 ? 8O

bonjour,

Citation:

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

Logique. Dans ton tableau :
Code:

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:

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

ton code ne change malheureusement rien :
Code:

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 ?

19/10/2008, 11h27
Tchupacabra

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

j'y comprends rien... :arf:
19/10/2008, 12h56
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 !

Alors ma question est : comment cloner/dupliquer ou copier ma variable aVilles ?

la prise de tête... :roll:

.
19/10/2008, 14h46
Auteur

j'ai trouvé ceci :

Citation:

Envoyé par selHTML

Les tableaux associatifs sont particulièrement indiqués en relation avec des tableaux à plusieurs dimensions. Ils permettent, indépendamment de la position, de rechercher la valeur d'un élément.

L'inconvénient en est que les méthodes de l'objet Array ne lui sont pas applicables.

par conséquent il faut trouver un moyen autre que la fonction sort() pour trier ton tableau.

voici ce que je te propose :

Code:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
var aVilles = new Array(
    {cp:'72000', nom:'Le Mans'},
    {cp:'72190', nom:'Coulaines'},
    {cp:'35000', nom:'Rennes'},
    {cp:'44000', nom:'Nantes'},
    {cp:'13000', nom:'Marseille'}
    );
 
function sortByCP(a, b) 
{
    a = parseInt(a);
    b = parseInt(b);
    return ( a <= b ) ? -1 : 1;
}
 
function sortByName(a, b) 
{
    return ( a <= b ) ? -1 : 1;
}
 
 
function trierPar(clef)
{
  var i, j, k;
  var temp = new Array();   // tableau temporaire utilisée pour le tri
  var tabOut = new Array(); // tableau de sortie
 
  // on place dans temp(i] les valeurs aVilles[i][clef]
  for (i=0; i<aVilles.length; i++)
  {
    temp[i] = aVilles[i][clef];
  }
 
  // tri par CP
  if (clef=="cp")
    temp = temp.sort(sortByCP);
 
  // tri par nom
  if (clef=="nom")
    temp = temp.sort(sortByName);
 
  // compteur pour tabOut  
  k = 0; 
 
  // /!\ l'ordre d'imbrication des boucles à une importance /!\
  // on boucle d'abord sur temp puis sur le tableau associatif
  for (j=0; j<temp.length; j++)
  {
    for (i=0; i<aVilles.length; i++)
    {
      // si à aVilles[i][clef] correspond un temp[j] on le place dans le tableau de sortie
      if (aVilles[i][clef]==temp[j]) 
      {
        tabOut[k] = aVilles[i]; // on place aVilles[i] dans le tableau de sortie
        k++;  // incrément de k
      }
    }
  }
 
  return tabOut;
}
 
 
 
//*******************************************
// **** utilisation de la fonction trierPar() :
var tabCP = new Array();
var tabNom = new Array();
 
tabCP = trierPar("cp"); // tri par CP
tabNom = trierPar("nom"); // tri par nom
 
// messages de sortie
var txt="";
for (i=0; i<tabCP.length; i++)
  txt += tabCP[i].cp+" "+tabCP[i].nom+"\n";
alert(txt);
 
txt="";
for (i=0; i<tabNom.length; i++)
  txt += tabNom[i].cp+" "+tabNom[i].nom+"\n";
alert(txt);

appelle la fonction trierPar() en précisant en paramètre la clef qui permettra le tri ("cp" ou "nom" dans ton cas). La fonction retourne un tableau trié par "cp" ou par "nom" (cf. code) ;)

Tchupacabra plus simple (merci DoubleU ;))

Code:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
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:'Marseille'}
		);
 
function sortBYNom(a, b)
{ 
  var res;
  if (a.nom==b.nom)
  {
    res = 0;
  }
  else
  {
    if (a.nom<b.nom)
      res = -1;
    else
      res = 1;
  }
  return res;
}    
 
function sortByCP(a, b) 
{
  var cp1, cp2;
  var res;
  cp1 = parseInt(a.cp);
  cp2 = parseInt(b.cp);
 
  if (cp1==cp2)
  {
    res = 0;
  }
  else
  {
    if (cp1<cp2)
      res = -1;
    else
      res = 1;
  }
  return res;
}
 
var aVillesByCP = aVilles.slice(0); // pour copier tout aVilles dans aVillesByCP 
var aVilleByNom = aVilles.slice(0); 
var txt;
 
aVillesByCP = aVillesByCP.sort(sortByCP);
aVilleByNom = aVilleByNom.sort(sortBYNom);
 
txt = "tri par CP :\n";
for (i=0; i<aVillesByCP.length; i++)
{
  txt += aVillesByCP[i]["cp"]+"\t"+aVillesByCP[i]["nom"]+"\n";
}
alert(txt);
 
txt = "tri par nom :\n"
for (i=0; i<aVilleByNom.length; i++)
{
  txt += aVilleByNom[i]["cp"]+"\t"+aVilleByNom[i]["nom"]+"\n";
}
alert(txt);

Citation:

J'ai l'impression que les variables aVillesByCP et aVillesByNom ne sont que des références vers le tableau source aVilles !

utilise la méthode slice() pour copier un tableau dans un autre ;) (cf. code ci-dessus)

Attention également : le test d'égalité c'est

Code:

if (valeur1==valeur2)

dans ton code tu l'as écris avec 3 "="

Code:

if (valeur1===valeur2)

20/10/2008, 20h31
bigboomshakala
Citation:

Envoyé par Auteur

Attention également : le test d'égalité c'est

Code:

if (valeur1==valeur2)

dans ton code tu l'as écris avec 3 "="

Code:

if (valeur1===valeur2)

il s'agit d'un opérateur d'égalité strict tout à fait licite. son opposé étant !==
Code:

1 2 alert(null == undefined); // true alert(null === undefined); // false

Code:

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
<script>
var v = [
    {zip:'72000', nom:'Le Mans'},
    {zip:72190, nom:'Coulaines'},
    {zip:'35000', nom:'rennes'},
    {zip:44000, nom:'Nantes'},
    {zip:13000, nom:'marseille'},
    {zip:'75000', nom:'Paris'},
    {zip:'63000', nom:'clermont-ferrand'}
];
 
function sortByCity(a,b){
    var v1 = a.nom.toLowerCase();
    var v2 = b.nom.toLowerCase();
 
    if (v1 < v2){
        return -1;
    }
    else if (v1 > v2){
        return 1;
    }
    return 0;
}
 
function sortByZip(a,b){
    var z1 = parseInt(a.zip);
    var z2 = parseInt(b.zip);
 
    if (z1 < z2){
        return -1;
    }
    else if (z1 > z2){
        return 1;
    }
    return 0;    
}
 
var res = v.sort(sortByCity);
var msg = "";
for (var i=0; i<res.length; i++){
    msg += res[i].nom + "\n";
}
alert(msg);
 
res = v.sort(sortByZip);
msg = "";
for (var i=0; i<res.length; i++){
    msg += res[i].zip + "\n";
}
alert(msg);
</script>

20/10/2008, 21h51
Bovino
Citation:
Envoyé par bigboomshakala

il s'agit d'un opérateur d'égalité strict tout à fait licite. son opposé étant !==

Code:

1 2 alert(null == undefined); // true alert(null === undefined); // false
Non seulement licite, mais indispensable dans certains cas !
Par exemple, quand on teste qu'une valeur existe mais que cette valeur peut valoir 0, un test du type

Code:

if(valeur==false)

Te renverra true puisque 0==false, en revanche

Code:

if(valeur===false)

te renverras false.

Bonjour,

Essaie ce code :

Code:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <script type="text/javascript">
      //<![CDATA[
        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'}
                               );
 
        function triBulle(aVilles, colonneATrier, colonneAssocie)
        {
          var longueur = aVilles.length
          for (var i = 0; i < longueur; i++)
          {
            for (var j = i + 1; j < longueur; j++)
            {
              if (aVilles[i][colonneATrier] > aVilles[j][colonneATrier])
              {
                swap(aVilles, colonneATrier, colonneAssocie, i, j);
              }
            }
          }
          return aVilles;
        }
 
        function swap(aVilles, colonneATrier, colonneAssocie, premier, second)
        {
          temp = aVilles[premier][colonneATrier];
          aVilles[premier][colonneATrier] = aVilles[second][colonneATrier];
          aVilles[second][colonneATrier] = temp;
 
          temp = aVilles[premier][colonneAssocie];
          aVilles[premier][colonneAssocie] = aVilles[second][colonneAssocie];
          aVilles[second][colonneAssocie] = temp;
 
          return aVilles;
        }
 
        function selectTri(formulaire)
        {
          with (formulaire)
          {
            var nb = choix.length;
            var i = 0;
            while (i < nb)
            {
              if (choix[i].checked)
              {
                colonneATrier = choix[i].value;
              }
              else
              {
                colonneAssocie = choix[i].value;
              }
              i ++;
            }
          }
          aVilles = triBulle(aVilles, colonneATrier, colonneAssocie);
          affiche(aVilles);
        }
 
        function affiche(aVilles)
        {
          var nb = aVilles.length;
          var tableau = '';
          var i = 0;
          while (i < nb)
          {
            tableau += '<tr><td width="50%" align="center">' + aVilles[i]['cp'] + '</td><td width="50%" align="center">' + aVilles[i]['nom'] + '</td></tr>';
            i ++;
          }
          document.getElementById('resultat').innerHTML = tableau;
        }
      //]]>
    </script>
  </head>
  <body onload=" affiche(aVilles)">
    <form name="test" id="test" method="post">
      <h3 align="center">Choisissez un tri</h3>
      <table width="30%" align="center">
        <tr>
          <td width="50%" align="center">Tri par cp</td>
          <td width="50%" align="center">Tri par nom</td>
        </tr>
        <tr>
          <td width="50%" align="center">
            <input type="radio" name="choix" value="cp" />
          </td>
          <td width="50%" align="center">
            <input type="radio" name="choix" value="nom" />
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <input type="button" value="Trier" onclick="selectTri(this.form);" />
          </td>
        </tr>
      </table>
    </form>
    <table width="30%" align="center" id="resultat">
    </table>
  </body>
</html>

Si ton tableau est très long, il existe des algo de tri beaucoup plus rapide, style quicksort :
http://www.4guysfromrolla.com/webtech/012799-1.shtml

21/10/2008, 10h27
le_chomeur

la méthode de tri , utilise un algo de tri inversé a base de boucle while inversé :)

pour expliquer simplement habituellement on fait :

for(i;i < mataille;i++){...}

pour un while inversé on test :

i = mataille
while(i){i--}

ce qui permet de tester un boulean et non de tester un opérande a chaque fois , il s'agit de la boucle la plus rapide en javascript mais pas adaptée a tous les cas
21/10/2008, 16h24
bigboomshakala
Citation:

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 :mouarf:
c'est tout à fait normal. les objets en javascript sont affectés par référence. donc quand tu écris
Code:

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:

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!
21/10/2008, 16h29
bigboomshakala

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

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

voici mon code fonctionnel :

Code:

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>

@+ :)

22/10/2008, 12h33
bigboomshakala

au fait, j'ai schtroumphé un fil dans le sous-forum Contribuez
22/10/2008, 12h35
bigboomshakala
Code:

1 2 3 4 function tri(a, b) { return ( a[0] < b[0] ) ? -1 : 1; if( a[0] === b[0] ) return 0; }
c'est tout buggé ça :aie:
ta fonction ne retourne que -1 ou 1, jamais 0
22/10/2008, 12h38
Tchupacabra

:oops: effectivement les 2 lignes sont inversés... :mrgreen:

quel oeil de lynx ! merci.