Lors d’un précédent billet, je vous avais présenté une méthode pour trier une liste en JavaScript. A l’époque, la sortie se faisait via la console. Dans la vraie vie du développeur Front, on affiche rarement le résultat sur la console (sauf pour débuguer).

Aussi, avec ce nouvel article je vais vous montrer comment effectuer les mêmes tris mais avec un affichage sur une page web.

Pour que ce soit joli, je vais utiliser Bootstrap pour donner un aspect sympathique à l’affichage.

Structure HTML de la page

Coté structure de la page en HTML, on reprend la base du dernier exemple avec les deux boutons permettant d’afficher le trie par âge et le trie par nom des personnages de notre jeu (reprise de l’exemple).

Puis on prépare l’espace où on affichera le résultat après chaque clic sur l’un ou l’autre bouton de choix. L’id utilisé pour cette sortie se nomme  » résultat  » :

<div class="container-fluid">
    <h2>Trier en javaScript</h2>
    <button type="button" class="btn btn-primary btn-sm" onclick="sortName()">Par Prénom</button>
    <button type="button" class="btn btn-secondary btn-sm" onclick="sortAge()">Par Age</button>

    <h3>Résultat</h3>
    <div>
        <div class="row">
            <div class="col-12 col-md-4">
                <div id="resultat"></div>
            </div>
            <div class="col-12 col-md-8">
            </div>
        </div>
    </div>
</div>

Côté JavaScript

On retrouve notre fière équipe avec ses caractéristiques. C’est juste un prétexte pour disposer de chaînes de caractères (String) et de nombres à trier pour notre exemple de trie avec JavaScript :

var warrior=[ 
    { name: "Kraken", age: 21, weapon: "arc" },
    { name: "Améria", age: 27, weapon: "fusil" },
    { name: "Narfy", age: 25, weapon: "couteau" },
    { name: "Golïm", age: 17, weapon: "poignard" },
    { name: "Fôrfiot", age: 18, weapon: "lance-flamme" },
    { name: "Nolülf", age: 23, weapon: "hache" },
    { name: "Joliett", age: 22, weapon: "bazooka" }
];

Fonction affichage tableau

En JavaScript, on va passer par une fonction qui a pour mission de générer l’affichage du résultat du trie sous forme de tableau à l’emplacement repéré par l’id défini nommé  » resultat  » (vu au-dessus).

Vous repérez facilement les balises HTML mentionnées dans cette fonction pour constituer le tableau de données triées :

function display(i) {
    console.log(i);
    var html = document.getElementById('resultat').innerHTML;
    html = html + "<table class='table table-striped'>";
    html = html + "<thead class='thead-inverse'><tr>";
    html = html + "<th scope='col'>Nom</th><th scope='col'>Age</th><th scope='col'>Arme</th>";
    html = html + "</thead></tr>";
    html = html + "<tbody>";
    warrior.forEach(function (warrior) {
        html = html + "<tr>";
        html = html + "<td>" + warrior.name + "</td><td>" + warrior.age + "</td><td>" + warrior.weapon + "</td>";
        html = html + "</tr>";
    }) html = html + "</tbody>";
    html = html + "</table>";
    document.getElementById('resultat').innerHTML = html;
}

Trier des nombres

Ici rien de nouveau sous le soleil car on reprend tout simplement la fonction de la dernière fois pour trier par âge :

function sortAge() {
    document.getElementById('resultat').innerHTML = " ";
    var intro = "Trié par age croissant";
    warrior.sort(function (a, b) {
        return a.age - b.age;
    });
    display(intro);
}

Trier des String (chaînes de caractères)

De la même manière, on reprend tout simplement la fonction de la dernière fois pour trier par nom en utilisant la fonction sortName() :

function sortName() {
    document.getElementById('resultat').innerHTML = " ";
    var intro = "Trié par nom croissant";
    warrior.sort(function (a, b) {
        return a.name.localeCompare(b.name);
    });
    display(intro);
}

Et voilà le tour est joué !
Cette proposition de solution pour trier des données en JavaScript n’est évidemment pas la seule et unique possibilité. Vous pouvez très bien développer d’autres méthodes ou fonctions pour arriver au même résultat.

Comme j’adore échanger, vous pouvez laisser un commentaire ou partager votre avis ou méthode.

Trier le contenu de listes est un exercice courant lorsqu’on développe des applications ou un site web. Aussi, si vous travaillez avec JavaScript, vous serez amené à utiliser la méthode sort() qui permet de trier les éléments d’un tableau. Ceci étant dit, trier des nombres fonctionne très bien avec cette méthode. Mais trier des chaînes de caractères peut vous apporter quelques surprises.

Je vous propose dans ce billet de vous présenter les deux possibilités : trier des nombres (facile) puis trier des chaînes de caractère.

On plante le décor

Avant de pouvoir s’amuser follement à trier en JavaScript, on besoin d’un peu de matière à manipuler. Imaginons un jeux de rôle avec de fiers guerriers caractérisés par un nom, un age et une arme :

var warriors= [
  { name: "Kraken", age: 21, weapon: "arc" },
  { name: "Améria", age: 27, weapon: "fusil" },
  { name: "Narfy", age: 25, weapon: "couteau" },
  { name: "Golïm", age: 17, weapon: "poignard" },
  { name: "Fôrfiot", age: 18, weapon: "lance-flamme" },
  { name: "Joliett", age: 22, weapon: "bazooka" }
];

Nous allons utiliser un affichage du résultat directement sur la console : je vous entends déjà vous esclaffer : « il ne se foule pas trop le gars 😉 ».
Et bien oui, et j’en suis fière.

De toute façon, une fois la méthode comprise, vous pouvez adapter ce script pour répondre à vos souhaits les plus fous…

Bref, revenons à nos lignes de codes : je vous propose d’utiliser une fonction qui aura pour mission d’afficher le résultat du tri.
L’utilisation d’une fonction permet d’éviter de recopier la même portion de code à de nombreux endroits (Cool !) :

function display(i) {
    console.log(i);
    for (i = 0; i < warriors.length; i++) {
        console.log(warriors[i].name + " a " + warriors[i].age + " ans et est équipé d'un " + warriors[i].weapon);
    }
}

Dans le corps de votre page HTML, on va ajouter deux boutons qui permettrons de lancer le tri par age et le tri par nom. A chaque bouton on associe une action qui lance la fonction ad hoc.
Jusque là tout va bien…

<h2>Trier en javaScript</h2> 
<button type="button">Par Prénom</button> 
<button type="button">Par Age</button>

Voyons de plus près ces jolies fonctions :

Trier des nombres

Comme annoncé en début de billet, la méthode sort() fait très bien le boulot et trier l’age de nos valeureux guerriers est un jeux d’enfants :

function sortAge() {
    warriors.sort(function (a, b) {
        return a.age - b.age;
    });
    display(intro);
}

Trier des chaînes de caractères (String)

Trier des chaînes de caractères (String) pose des soucis car le tri s’effectue par défaut selon les points de code Unicode de la chaine de caractères.
Oui mais encore…

Typiquement, cela veut dire que chaque caractère est converti en son code Unicode qui sert à faire le tri.
On peut se retrouver devant un résultat retourner par la machine qui peut laisser perplexe l’être humain que nous sommes : « Cian » sera trié avant « bleu ». Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, « 80 » arrive avant « 9 » selon l’ordre Unicode.

Notre fonction qui tri par nom les courageux guerriers se traduit comme suit :

function sortName() {
    warriors.sort(function (a, b) {
        var nameA = a.name.toUpperCase();
        var nameB = b.name.toUpperCase();
        if (nameA < nameB) {
            return -1;
        }
        if (nameA > nameB) {
            return 1;
        }
        return 0;
    });
    display(intro);
}

Pour donner un coup de main à la fonction de tri, on passe par une transformation des lettres en majuscules (tous les mots sont logés à la même enseigne…).

reTada ! Quel beau tri par nom, n’est-ce pas ?

Et voilà le tour est joué !
Alors sautez sur votre éditeur de code préféré pour mettre en application le trie de données en JavaScript.

Cette proposition de solution pour trier des données en JavaScript n’est évidemment pas la seule et unique possibilité. Vous pouvez très bien développer d’autres méthodes ou fonctions pour arriver au même résultat. Comme j’adore échanger, vous pouvez laisser un commentaire ou partager votre avis ou méthode.