Fonction Sort ne trie pas par date le fichier JSON

**clickandgo** · 17/01/2023, 12h21

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 :

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

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
    [
        {
            "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>"
            ]
        }
    ]

**Beginner.** · 17/01/2023, 12h36

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

**SpaceFrog** · 17/01/2023, 12h38

ou modifier le sort pour faire un split reverse join sur la date avant de comparer

**clickandgo** · 17/01/2023, 13h28

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 ?

**SpaceFrog** · 17/01/2023, 13h34

tu peux convertir le string en date ...

**Beginner.** · 17/01/2023, 13h42

Oui tu convertis et ensuite pour l'affichage locale tu peux utiliser : toLocaleDateString

**clickandgo** · 17/01/2023, 14h19

Envoyé par SpaceFrog

tu peux convertir le string en date ...

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

Code :

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

return new Date(a.date) - new Date(b.date)

**SpaceFrog** · 17/01/2023, 14h51

ha mais du coup ne faut il pas plutot faire :

Code :

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

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

**clickandgo** · 17/01/2023, 15h16

Je ne connais pas cette ternaire, ça veut dire quoi ?

**SpaceFrog** · 17/01/2023, 15h45

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

**NoSmoking** · 17/01/2023, 16h02

Bonjour,
attention

Code :

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

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 :

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

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

**SpaceFrog** · 17/01/2023, 16h09

Code :

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

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

**NoSmoking** · 17/01/2023, 16h39

Envoyé par SpaceFrog

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

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 :

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

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

par exemple.

**SpaceFrog** · 17/01/2023, 16h51

En effet au temps pour moi

Code :

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

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

**clickandgo** · 17/01/2023, 18h25

Merci pour vos réponses

Que de bricolages pour une chose aussi simple !

**clickandgo** · 17/01/2023, 18h28

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

**NoSmoking** · 17/01/2023, 18h42

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 !

**clickandgo** · 18/01/2023, 02h07

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

.

**SpaceFrog** · 18/01/2023, 08h32

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

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.

**clickandgo** · 23/01/2023, 00h39

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 :

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

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

Fonction Sort ne trie pas par date le fichier JSON

JavaScript

Discussions similaires

Partager

Partager