Trier un tableau associatif [Sources]

**bigboomshakala** · 21/10/2008, 15h39

J'ai lu il y a peu qu'on ne pouvait pas trier un tableau associatif en utilisation la méthode sort() des Array. Je ne suis pas d'accord.
démonstration :

Comment trier un tableau associatif ?

sortByPseudo : foncteur de tri de chaînes de caractères "pseudo"
sortById : foncteur de tri d'entier "id"
sortByNbMsg : foncteur de tri d'entier "nbmsg"
utilisateurs : un tableau associatif classique

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
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
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
function sortByPseudo(a,b){
    return sortStringNoCase(a,b,"pseudo");
}
 
function sortByNbMsg(a,b){
    return sortInt(a,b,"nbmsg");
}
 
function sortById(a,b){
    return sortInt(a,b,"id");
}
 
function sortStringNoCase(a,b,field){
    var v1 = a[field].toLowerCase();
    var v2 = b[field].toLowerCase();
    if (v1<v2) return -1;
    if (v1>v2) return 1;
    return 0;
}
 
function sortInt(a,b,field){
    var v1 = parseInt(a[field]);
    var v2 = parseInt(b[field]);
    if (v1<v2) return -1;
    if (v1>v2) return 1;
    return 0;
}
 
var utilisateurs = new Array();
 
utilisateurs[0] = new Array();
utilisateurs[0]["pseudo"] = "SpaceFrog";
utilisateurs[0]["nbmsg"] = "17052";
utilisateurs[0]["id"]= "547";
 
utilisateurs[1] = new Array();
utilisateurs[1]["pseudo"] = "Auteur";
utilisateurs[1]["nbmsg"] = "3458";
utilisateurs[1]["id"]= "36505";
 
utilisateurs[2] = new Array();
utilisateurs[2]["pseudo"] = "Le_Chomeur";
utilisateurs[2]["nbmsg"] = "88046";
utilisateurs[2]["id"]= "547";
 
utilisateurs[3] = new Array();
utilisateurs[3]["pseudo"] = "Bovino";
utilisateurs[3]["nbmsg"] = "1510";
utilisateurs[3]["id"]= "243304";
 
utilisateurs[4] = new Array();
utilisateurs[4]["pseudo"] = "Bisûnûrs";
utilisateurs[4]["nbmsg"] = "6315";
utilisateurs[4]["id"]= "29957";
 
document.write("<h1>Tri par pseudo<\/h1><p>");
var res = utilisateurs.sort(sortByPseudo);
for (var i=0;i<res.length;i++)
{
document.write("<dl><dt>Individu "+(i+1)+"<\/dt>");
 for (var propriete in res[i])
    document.write("<dd>"+ propriete + ": "+res[i][propriete]+"<\/dd>");
document.write("<\/dl>");
}
document.write("<\/p><h1>Tri par nombre de messages<\/h1><p>");
res = utilisateurs.sort(sortByNbMsg);
for (var i=0;i<res.length;i++)
{
document.write("<dl><dt>Individu "+(i+1)+"<\/dt>");
 for (var propriete in res[i])
    document.write("<dd>"+ propriete + ": "+res[i][propriete]+"<\/dd>");
document.write("<\/dl>");
}
document.write("<\/p><h1>Tri par id<\/h1><p>");
res = utilisateurs.sort(sortById);
for (var i=0;i<res.length;i++)
{
document.write("<dl><dt>Individu "+(i+1)+"<\/dt>");
 for (var propriete in res[i])
    document.write("<dd>"+ propriete + ": "+res[i][propriete]+"<\/dd>");
document.write("<\/dl>");
}
document.write("<\/p>");
//-->
</script>
</body></html>

si on ne veut pas utiliser un tableau associatif "classique" (pour x raisons) on peut également trier un tableau d'objets et utiliser quand même la méthode sort() des Array. le code est strictement le même puisqu'un Array est un objet et que pour accéder à une propriété d'un objet on peut utiliser la syntaxe monObjet["maPropriété"]

testez le code précédent avec ce nouveau tableau :

Code :

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

1
2
3
4
5
6
7
var utilisateurs = new Array(
    {pseudo:"SpaceFrog ", nbmsg:"17052", id:"547"},
    {pseudo:"Auteur    ", nbmsg:"3458", id:"36505"},
    {pseudo:"Le_Chomeur", nbmsg:"1663", id:"88046"},
    {pseudo:"Bovino    ", nbmsg:"1510", id:"243304"},
    {pseudo:"Bisûnûrs  ", nbmsg:"6315", id:"29957"}
    );

dans les exemples précédents il faut bien voir que chaînes et entiers ne s'ordonnent pas de la même façon.

en chaîne : "1111" < "9"
en entier : 1111 > 9

d'où la conversion des représentations d'entiers sous forme de chaînes de caractères en "vrais" entiers (si l'on puit dire en JavaScript) avec la fonction sortInt.

ce n'est pas conseillé par soucis de cohérence, mais les id et nbmsg des exemples précédents peuvent mixer les notations chaîne et entière. Le parseInt lisse tout pendant le traitement

2ème chose : La comparaison de chaînes est sensible à la casse. donc si vous voulez trier des chaines sans vous soucier de la casse faites comme dans sortStringNoCase() et appliquer un toLowerCase() ou toUpperCase() sur vos chaînes

Et pour ceux qui veulent étendre les fonctionnalités des Array JavaScript, vous pouvez ajouter ces fonctions de tris (et d'autres de votre crues) à la classe Array :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
Array.prototype.sortInt = function(){
    var direction = 1;
 
    switch(arguments.length)
    {
     case 0 : return this;
     case 1 : break;
     default :
        switch (arguments[1].toLowerCase())
       {
         case "asc" : break;
         case "desc" : direction = -1; break;
         default : return this;
       }
    }
 
  var field = arguments[0];
  if (this[field]===undefined)
    return this;
 
  return this.sort(function(a,b){
      var v1 = parseInt(a[field]);
      var v2 = parseInt(b[field]);
      if (v1<v2) return -direction;
      if (v1>v2) return direction;
      return 0;
  });
}
 
 
Array.prototype.sortString = function(){
    var direction = 1;
 
    switch(arguments.length)
    {
     case 0 : return this;
     case 1 : break;
     default :
        switch (arguments[1].toLowerCase())
       {
         case "asc" : break;
         case "desc" : direction = -1; break;
         default : return this;
       }
    }
 
    var field = arguments[0];
  if (this[field]===undefined)
    return this;
 
    return this.sort(function(a,b){
        var fact = asc ? 1 : -1;
        var v1 = a[field].toLowerCase();
        var v2 = b[field].toLowerCase();
        if (v1<v2) return -direction;
        if (v1>v2) return direction;
        return 0;
    });
}
 
utilisateurs.sortInt("id","asc");
var msg = "";
for (var i=0; i<utilisateurs.length; i++){
    msg += utilisateurs[i].id + "\n";
}
alert(msg);
 
utilisateurs.sortInt("id","desc");
var msg = "";
for (var i=0; i<utilisateurs.length; i++){
    msg += utilisateurs[i].id + "\n";
}
alert(msg);

Vous avez alors accès directement à partir de n'importe Array JavaScript aux fonctions de tri ascendant et descendant pour les chaînes de caractères et les entiers (c'est pas beautiful ça ?)

**le_chomeur** · 21/10/2008, 16h04

hum ouep ,il aurait été interessant de ne faire que 2 méthodes de tri :

- SortByInt
- SortByString

avec en paramètre le champs sur lequel trier

moi j'dis ça

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

avec Array.sort() ce n'est pas possible
l'argument optionnel est un foncteur à 2 paramètres (les éléments qui vont être triés). donc on doit passer une fonction acceptant 2 paramètres. on ne peut qu'utiliser dans cette fonction une autre fonction qui elle est plus générique

disons que sortInt et sortStringNoCase sont des fonctions génériques qui pourront être réutiliser n'importe où, tandis que sortByQuelquechose(a,b) est implémenté dans un cas spécifique et utilise l'une des fonctions génériques

**le_chomeur** · 21/10/2008, 17h02

ben et en passant :

Code :

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

1
2
3
4
 
function sortBy(a,b,champs,type){
    return ((type == "int") ? sortInt(a,b,"nbmsg"):sortStringNoCase(a,b,champs);)
}

a la place de :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function sortByPseudo(a,b){
    return sortStringNoCase(a,b,"pseudo");
}
 
function sortByNbMsg(a,b){
    return sortInt(a,b,"nbmsg");
}
 
function sortById(a,b){
    return sortInt(a,b,"id");
}

pas pu testé ...

**bigboomshakala** · 21/10/2008, 17h04

ATTEEEEEEEEEEEENDS !!!

oui bien sûr c'est possible... (pff jme rattrape comme je peux)

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
Array.prototype.sortIntAsc = function(field){
    this.sort(function(a,b){
        var v1 = parseInt(a[field]);
        var v2 = parseInt(b[field]);
        if (v1<v2) return -1;
        if (v1>v2) return 1;
        return 0;
    });
}
 
Array.prototype.sortIntDesc = function(field){
    this.sort(function(a,b){
        var v1 = parseInt(a[field]);
        var v2 = parseInt(b[field]);
        if (v1<v2) return 1;
        if (v1>v2) return -1;
        return 0;
    });
}
 
Array.prototype.sortStringAsc = function(field){
    this.sort(function(a,b){
        var v1 = a[field].toLowerCase();
        var v2 = b[field].toLowerCase();
        if (v1<v2) return -1;
        if (v1>v2) return 1;
        return 0;
    });
}
 
Array.prototype.sortStringDesc = function(field){
    this.sort(function(a,b){
        var v1 = a[field].toLowerCase();
        var v2 = b[field].toLowerCase();
        if (v1<v2) return 1;
        if (v1>v2) return -1;
        return 0;
    });
}
 
utilisateurs.sortStringAsc("pseudo");
var msg = "";
for (var i=0; i<utilisateurs.length; i++){
    msg += utilisateurs[i].pseudo + "\n";
}
alert(msg);

j'ai édité mon 1er post avec cette nouvelle possibilité

**le_chomeur** · 21/10/2008, 17h09

dans ce cas :

on peut également ajouter pour rendre générique :

Code :

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

1
2
3
function sortBy(a,b,champs,type,Order){
    return ((type == "int") ? sortInt(a,b,"nbmsg",order):sortStringNoCase(a,b,champs);)
}

puis :

Code :

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

1
2
3
4
5
6
7
8
9
Array.prototype.sortInt = function(field,order){
    this.sort(function(a,b){
        var v1 = parseInt(a[field]);
        var v2 = parseInt(b[field]);
        if (v1<v2) return (order == "asc") -1:1;
        if (v1>v2) return (order == "asc") 1:-1;
        return 0;
    });
}

ps : mince pas édité le mien pour la méthode by string mais le principe est la

**bigboomshakala** · 21/10/2008, 17h18

owned by BBS. et je viens d'améliorer le bousin dans le 1er post
les appels deviennent :

Code :

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

1
2
monArray.sortString(champ,"asc" ou "desc");
monArray.sortInt(champ,"asc" ou "desc");

**le_chomeur** · 21/10/2008, 17h22

mdrrr GG
comme quoi a deux c'est toujours plus sympa :p

**bigboomshakala** · 21/10/2008, 17h27

Envoyé par le_chomeur

mdrrr GG
comme quoi a deux c'est toujours plus sympa :p

tu m'étonnes, ça motive.
j'ai encore amélioré le pousse-pousse.

si pas d'argument > renvoie le tableau non trié
si un argument > renvoie le tableau trié si le champ existe, non trié sinon
si 2 arguments > renvoie le tableau trié si la direction de tri est correcte (asc ou desc, peu importe la casse), non trié sinon

j'ai pas testé tous les cas, donc s'il y a une erreur n'hésitez pas à corriger

**sebb13** · 29/07/2009, 11h55

Bonjour!
Très intéressants ces petits bouts de code, et cela correspond exactement à ce que je recherche depuis 2-3 jours maintenant.
Par contre, je n'arrive pas à faire fonctionner tout ça..

La console d'erreur me dit aJs.sortStringAsc is not a function

Je suis plus que novice en Javascript.... Merci pour votre aide.
Seb

**sebb13** · 29/07/2009, 11h58

en fait, (pour être plus précis)
Voici ce que j'ai fais :
Dans mon fichier externe function.js, j'ai mis

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
 
Array.prototype.sortIntAsc = function(field){
    this.sort(function(a,b){
        var v1 = parseInt(a[field]);
        var v2 = parseInt(b[field]);
        if (v1<v2) return -1;
        if (v1>v2) return 1;
        return 0;
    });
}
 
Array.prototype.sortIntDesc = function(field){
    this.sort(function(a,b){
        var v1 = parseInt(a[field]);
        var v2 = parseInt(b[field]);
        if (v1<v2) return 1;
        if (v1>v2) return -1;
        return 0;
    });
}
 
Array.prototype.sortStringAsc = function(field){
    this.sort(function(a,b){
        var v1 = a[field].toLowerCase();
        var v2 = b[field].toLowerCase();
        if (v1<v2) return -1;
        if (v1>v2) return 1;
        return 0;
    });
}
 
Array.prototype.sortStringDesc = function(field){
    this.sort(function(a,b){
        var v1 = a[field].toLowerCase();
        var v2 = b[field].toLowerCase();
        if (v1<v2) return 1;
        if (v1>v2) return -1;
        return 0;
    });
}

et voici comment je l'utilise :

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
 
<script langage="javaScript">
<?php 
$sJs = 'var aJs = new Array(';
foreach($aResult as $result) {
        $aJs[] = '{name_contact:"'.addslashes($result['name_contact']).'", first_name_contact:"'.addslashes($result['first_name_contact']).'", 
        item_contact:"'.addslashes($result['item_contact']).'", service_contact:"'.addslashes($result['service_contact']).'"}';
}
$sJsImplode = implode(', ', $aJs);
echo $sJs.$sJsImplode.');';
?>
 
aJs.sortStringAsc("name_contact");
for (var i=0; i<aJs.length; i++){
	document.write("<span>"+ propriete + ": "+aJs[i].name_contact+"</span>");
	document.write("<span>"+ propriete + ": "+aJs[i].first_name_contact+"</span>");
}
</script>
<?php

Voilà, espérant être clair...

**Bovino** · 29/07/2009, 12h58

Attention, avec la notation JSON que tu écris, tu génères des types Object, ils n'héritent donc pas des propriétés des types Array

**sebb13** · 29/07/2009, 13h04

Envoyé par Bovino

Attention, avec la notation JSON que tu écris, tu génères des types Object, ils n'héritent donc pas des propriétés des types Array

o_O Pas compris... Désolé, je suis vraiment novice (en javascript)...

Et tant que j'y suis, il y a quelque chose que je ne saisi pas.

Code :

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

1
2
3
4
5
6
 
Array.prototype.sortStringAsc = function(field){
    this.sort(function(a,b){
        var v1 = a[field].toLowerCase();
        var v2 = b[field].toLowerCase();
...

Ces variables là, a et b que la function attend en paramètre, on ne les renseigne jamais?
Au risque de passer pour un neuneu, ça me déstabilise quelque peu...

Merci pour ta réponse!

**sebb13** · 29/07/2009, 14h15

Ok, je viens de comprendre en regardant un peu ce qui se dit sur JSON.
Ceci dit, je ne vois pas la différence entre ma manière de construire mon tableau javascript et

Code :

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

1
2
3
4
5
6
7
8
 
var utilisateurs = new Array(
    {pseudo:"SpaceFrog ", nbmsg:"17052", id:"547"},
    {pseudo:"Auteur    ", nbmsg:"3458", id:"36505"},
    {pseudo:"Le_Chomeur", nbmsg:"1663", id:"88046"},
    {pseudo:"Bovino    ", nbmsg:"1510", id:"243304"},
    {pseudo:"Bisûnûrs  ", nbmsg:"6315", id:"29957"}
    );

comme donné pour exemple plus haut!

**sebb13** · 29/07/2009, 15h11

Bon, j'ai modifier ma manière de construire mon tableau, mais ça ne marche pas mieux...
Même message d'erreur, je ne vois pas ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script langage="javaScript">
var i = 0;
var aJs = new Array();
<?php 
foreach($aResult as $result) {
        echo 'aJs[i] = new Array();
        aJs[i]["name_contact"] = "'.addslashes($result['name_contact']).'";
        aJs[i]["first_name_contact"] = "'.addslashes($result['first_name_contact']).'";
        aJs[i]["item_contact"] = "'.addslashes($result['item_contact']).'";
        aJs[i]["service_contact"] = "'.addslashes($result['service_contact']).'";';
        echo 'i++;';
}
?>

Merci pour votre aide!

**Bovino** · 29/07/2009, 16h09

Code :

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

1
2
3
4
Array.prototype.sortStringAsc = function(field){
    this.sort(function(a,b){
        var v1 = a[field].toLowerCase();
        var v2 = b[field].toLowerCase();

La fonction sort() appelle une fonction interne qui prend deux paramètres à comparer, donc non, on ne les défini jamais, JavaScript le fait pour toi.

Ensuite, quelle que soit la façon de les déclarer, les tableaux associatifs n'existent pas en JavaScript, donc malgré le new Array, il va y avoir transtypage interne vers un objet de type Object.
Or toi, tu défini tes fonctions comme étant des prototypes de l'objet Array, elles ne sont donc pas disponibles pour tes tableaux !

**sebb13** · 29/07/2009, 16h19

Les codes décrits plus haut ne fonctionnent donc pas alors? o_O
J'avoue avoir beaucoup de mal à comprendre...
Je suis là dessus depuis 7h du matin... à deux deux doigts de m'arracher les cheveux...
ça m'ennuierait de devoir abandonner cette technique et de le faire en PHP...
Les tableaux que je veux trier peuvent être très grand et solliciter le serveur pour du tri...

**G.D.V.L.** · 04/11/2011, 11h19

En gros...

Code :

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

javascript:alert(typeof(new Array())); // affiche object

Tu auras beau écrire le JSON comme il faut pour créer ce que tu crois être un "Array", Javascript créera un "object".

(désolé de pas aider plus, j'en apprend aussi ^^)

(pas vu la date du post... comment je supprime mon message ?

)

**paladice** · 12/04/2013, 09h41

Bonjour à tous,

j'ai un petit problème avec le trie des tableaux associatif en JS et en parcourant vos messages précédents je me demande si je ne trouverais pas un peu d'aide ici ^^.

J'ai un tableau de ce genre :

Code :

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

1
2
3
4
5
 
var tabCellules = [];
tabCellules[0] = new Array({ id: "A", nb: "B", test: "C" });
tabCellules[1] = new Array({ id: "D", nb: "E", test: "F" });
tabCellules[2] = new Array({ id: "G", nb: "H", test: "I" });

Vous pensez que je pourrais trier par "id" par exemple ? merci

**dragonno** · 13/04/2013, 00h26

Citation:
Envoyé par Bovino
Attention, avec la notation JSON que tu écris, tu génères des types Object, ils n'héritent donc pas des propriétés des types Array

o_O Pas compris... Désolé, je suis vraiment novice (en javascript)...

Seb, dés que tu mets des clefs avec leurs valeurs, dans un tableau, celui-ci est automatiquement transformé en objet, donc tu n'a plus accés aux fonctions utilisées par un tableau (les fonctions de Array).

Trier un tableau associatif [Sources]

Contribuez

Discussions similaires

Partager

Partager