Fonction Sort ne trie pas par date le fichier JSON

Version imprimable

Bonjour à tous

Comme dit dans le titre, la fonction Sort() que j'essaie de mettre en place dans le code suivant ne trie finalement pas le champ de date, je ne sais pourquoi (problème de format ?)

Par contre si l'on passe sur un autre champ le tri s'effectue bien...

A noter que la position du code n'est pas définitive, c'est juste pour essai... (le tri se fera dans les deux sens grâce à un select...)

Merci d'avance pour votre éclairage

evenements.js:

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
let divNewsList = document.querySelector('.news-list')
 
const urlEvenements = fetch("./json/evenements.json")
    .then(response => {
        return response.json()
    })
    .then(evenements => {
                const dateAsc = evenements.sort((a, b) => {
                    return new Date(a.date) - new Date(b.date)
                })
                console.log('Tri Date ascendante:' + JSON.stringify(dateAsc))
 
          const html = evenements.map(evenement => {
            return `<article>
                        <div class="col-md-6 mx-auto">
                            <div class="card bg-light text-black">
                                <div class="card-body">
                                    <div class="container d-flex justify-content-start date-news">
                                        <p class="card-title mb-3 news-date text-left mx-1">
                                        <i class="bi bi-calendar3 my-auto"></i>&nbsp;&nbsp;${evenement.date}</p>
                                    </div>
                                    <div class="container">
                                        <h5 class="text-primary">${evenement.title}</h5> 
                                        <div class="card-text">${evenement.content.join('')}</div>                                
                                        <div class="text-center">
                                            <a href="#" class="btn btn-primary mt-2">Voir plus ...</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>`
        })
        divNewsList.innerHTML += html
 
    })

evenements.json :

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
    [
        {
            "id": "1",
            "date": "25/10/2021",
            "title": "Premier rassemblement",
            "content": [
                "<p>- Participez à notre premier rassemblement, faisons connaissance...</p>",
                "<p>- Apéro et gôuter offerts, animaux bienvenus (si tenus en laisse... <i class='bi bi-emoji-wink'></i>)</p>"
            ]
        },
        {
            "id": "2",
            "date": "25/11/2021",
            "title": "Deuxième rassemblement",
            "content": [
                "<p>- Participez à notre premier rassemblement, faisons connaissance...</p>",
                "<p>- Apéro et gôuter offerts, animaux bienvenus (si tenus en laisse... <i class='bi bi-emoji-wink'></i>)</p>"
            ]
        },
        {
            "id": "3",
            "date": "25/10/2022",
            "title": "Troisième rassemblement",
            "content": [
                "<p>- Participez à notre premier rassemblement, faisons connaissance...</p>",
                "<p>- Apéro et gôuter offerts, animaux bienvenus (si tenus en laisse... <i class='bi bi-emoji-wink'></i>)</p>"
            ]
        }
    ]

17/01/2023, 12h36
Beginner.

Citation:

Envoyé par clickandgo

Comme dit dans le titre, la fonction Sort() que j'essaie de mettre en place dans le code suivant ne trie finalement pas le champ de date, je ne sais pourquoi (problème de format ?)

Oui c'est un problème de format : au lieu de lui donner "25/10/2021" tu dois lui donner "2021/10/25"...
17/01/2023, 12h38
SpaceFrog

ou modifier le sort pour faire un split reverse join sur la date avant de comparer
17/01/2023, 13h28
clickandgo

Merci Beginner et SpaceFrog pour votre réponse,

Je conclue qu'il faut prendre pour habitude d'écrire les dates dans le fichier JSON au format anglais pour bonne pratique puis inverser ensuite au besoin ?

N'y a t'il pas une fonction de format qui prendrait la locale par défaut ?
17/01/2023, 13h34
SpaceFrog

tu peux convertir le string en date ...
17/01/2023, 13h42
Beginner.

Oui tu convertis et ensuite pour l'affichage locale tu peux utiliser : toLocaleDateString
17/01/2023, 14h19
clickandgo

Citation:

Envoyé par SpaceFrog

tu peux convertir le string en date ...

Cela n'est il pas déjà fait sur la ligne ?. :

Code:

return new Date(a.date) - new Date(b.date)
17/01/2023, 14h51
SpaceFrog

ha mais du coup ne faut il pas plutot faire :

Code:

return (new Date(a.date) > new Date(b.date))?1:-1;
17/01/2023, 15h16
clickandgo

Je ne connais pas cette ternaire, ça veut dire quoi ?
17/01/2023, 15h45
SpaceFrog

la fonction sort doit retourner 1 ou -1 pour ordonner les éléments ...
il suffit donc de retourner 1 ou -1 sur la comparaison des deux dates

Bonjour,
attention

Code:

new Date(""25/11/2021")

retourne une erreur : Invalid Date en raison du mauvais format de la chaîne passée en paramètre, il faut donc déjà la rendre conforme avant test :

Code:

1
2
3
4
5
6
7
8
9
10
11
data.sort((a, b) => {
  // transform JJ/MM/AAAA en AAAA/MM/JJ
  const sA = a.date.split("/").reverse().join("-");
  const sB = b.date.split("/").reverse().join("-");
  // solution #1 -> devrait suffire
  return sA - sB;                                         
  // solution #2 -> pas franchement utile ici
  return sA.localeCompare(sB);
  // solution #3 -> solution lourde
  return new Date(sA).getTime() - new Date(sB).getTime();
})

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
MyList = [ {"id" : 1,
           "date": "25/10/2021"},
          {"id":2,
           "date": "25/11/2021"},
          {"id":3,
           "date": "25/12/2021"}
          ]; 
 
function datesort(a,b){
 return (new Date(a.date) > new Date(b.date))? 1:-1;
 }           
 
MyList.sort(datesort);
console.log(MyList);

17/01/2023, 16h39
NoSmoking
Citation:

Envoyé par SpaceFrog

return (new Date(a.date) > new Date(b.date))? 1:-1;

:nono: pour la raison expliquée ci-dessus, tu auras toujours -1, NaN > NaN ? 1: -1, comme résultat.

Sur ce coup tu as de la chance, essaie en mettant
Code:

1 2 {"id":2, "date": "25/11/2022"},
par exemple.

En effet au temps pour moi :oops:

Code:

1
2
3
4
5
6
7
function datesort(a,b){
 
 dateA=new Date(a.date.split("/").reverse().join('-'));
 dateB=new Date(b.date.split("/").reverse().join('-'));
 return (dateA > dateB)? 1:-1;
 
 }

17/01/2023, 18h25
clickandgo

Merci pour vos réponses

Que de bricolages pour une chose aussi simple ! :)
17/01/2023, 18h28
clickandgo

Merci de m'avoir répondu, j'en profite pour te signaler que l'on doit écrire "autant pour moi" malgré que beaucoup de sms s'échangent avec cette faute de syntaxe ... "autant" représentant une quantité... dans l'esprit... :)
17/01/2023, 18h42
NoSmoking

Citation:

Envoyé par clickandgo

j'en profite pour te signaler que l'on doit écrire "autant pour moi" malgré que beaucoup de sms s'échangent avec cette faute de syntaxe ... "autant" représentant une quantité... dans l'esprit... :)

je ne serais pas « autant » catégorique : par exemple, le débat est toujours ouvert !
18/01/2023, 02h07
clickandgo

On peut utiliser les deux mais l'origine militaire de "au temps pour moi" qui paraît incontestée n'était peut être pas applicable dans ce cas-ci vu que ton intention était de reconnaître une erreur ou manquement ...
"Autant pour moi" me semblerait plus indiqué mais ceci dit, il y aura toujours débat et je serai donc moins catégorique, c'est promis ... :) .
18/01/2023, 08h32
SpaceFrog

Je ne suis pas contestataire https://www.projet-voltaire.fr/regle...tant-pour-moi/
mais plutôt accédémique

Citation:

Pour autant, l’Académie française est formelle : c’est la graphie « au temps » qui doit être retenue.

Vu que pour moi c'est l'académie Française qui est garante de votre belle langue.

Bonjour SpaceFrog

je reviens sur la discussion pour signaler que j'avais une erreur dans le code car il me demandait de déclarer les variables, j'ai donc essayé avec çà et ça a marché, mais je ne comprends pas pourquoi il exige "let", nouvelle norme ?
Code:

1 2 3 4 5 function triDateFrDesc(a, b) { let dateA = new Date(a.date.split("/").reverse().join('-')); let dateB = new Date(b.date.split("/").reverse().join('-')); return (dateA < dateB) ? 1 : -1; }

23/01/2023, 08h32
SpaceFrog

C'est le progrès paraît-il ...