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:
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
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> ${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 })
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>" ] } ]
Partager