Discussion :

[clickandgo]

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

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]

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

[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 ?

[SpaceFrog]

tu peux convertir le string en date ...

[Beginner.]

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

[clickandgo]

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)