Afficher résultat fetch à l'ouverture de la page avec tri par défaut

Version imprimable

Bonjour à tous

Dans le code ci dessous permettant de filtrer les dates suivant choix dans un select, je voudrais qu'à l'ouverture de page le type de tri soit descendant...
J'ai essayé d'appeler les fonctions correspondantes dans un window.onload mais vu que la fonction est externe au fetch réalisé, pas moyen d’accéder aux variables sans qu'un "undefined" soit signalé !

J'ai aussi essayé d'externaliser les autres fonctions en dehors du fetch : la variable principale "evts" devient "undefined" elle aussi et le code bloque même lorsque déclaré en début de module...

A noter que l'affichage du filtre en question marche parfaitement mais seulement lorsqu'on utilise le select...

Comment faire ? quelles seraient les bonnes pratiques ?

Merci d'avance

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
let divNewsList = document.querySelector('.news-list')
let selectTriDate = document.querySelector('#triDateEvenement')
// let evtsSorted=""
window.onload = (evts) => {
    evts.sort(triDateFrDesc)
    triParDate(evts)
    afficherListeEvts(evts)
}
const urlEvenements = fetch("./json/evenements.json")
    .then(response => {
        return response.json()
    })
    .then(evts => {
 
        const triParDate = (evts) => {
 
            if (selectTriDate.value == 1) {
                evts.sort(triDateFrDesc)
            }
            if (selectTriDate.value == 2) {
                evts.sort(triDateFrAsc)
            }
 
            function triDateFrDesc(a, b) {
                dateA = new Date(a.date.split("/").reverse().join('-'));
                dateB = new Date(b.date.split("/").reverse().join('-'));
                return (dateA < dateB) ? 1 : -1;
            }
 
            function triDateFrAsc(a, b) {
                dateA = new Date(a.date.split("/").reverse().join('-'));
                dateB = new Date(b.date.split("/").reverse().join('-'));
                return (dateA > dateB) ? 1 : -1;
            }
        }
 
        const afficherListeEvts = (evts) => {
            const html = evts.map(evt => {
                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;${evt.date}</p>
            </div>
            <div class="container">
            <h5 class="text-primary">${evt.title}</h5> 
            <div class="card-text">${evt.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
        }
        //Classe par date Française en ascendant ou descendant
        //suivant le choix utilisateur dans le select
        selectTriDate.addEventListener('change', () => {
            triParDate(evts)
            afficherListeEvts(evts)
            console.log(evts)
        })
    })

20/01/2023, 17h31
mathieu

vous faites un mélange bizarre de création de fonctions de 2 façons ainsi que l'exécution du code.
je pense que votre code serait plus clair en séparant les classes et fonctions dans des fichiers séparés et l'utilisation des fonctions dans des autres fichiers.
20/01/2023, 18h17
clickandgo

Bonjour Mathieu

Comme dit précédemment mon intention était de sortir les fonctions du fetch mais j'ai beau essayer, la variable principale "evts" devient "undefined" dans tous les cas même en la déclarant en global au début du module, ce qui, pour moi et pour l'instant me semble incompréhensible...
Je pensais que "evts" qui est le json renvoyé deviendrait disponible dans tout le module et en dehors du fetch...

Bon, j'ai progressé :

J'ai externalisé les fonctions en dehors du fetch, lui même a été re-codé ...

A l'ouverture de la page l'affichage des événements se fait bien, par contre, ça bloque encore sur la fonction triParDate() avec l'avertissement "a.date is undefined", j'en déduis qu'il n'arrive toujours pas à trouver la variable "evts" pourtant la fonction afficherListeEvts() elle, la trouve bien !

Une idée ?

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
let divNewsList = document.querySelector('.news-list')
let selectTriDate = document.querySelector('#triDateEvenement')
 
const lstEvenements = async () => {
    var response = await fetch("./json/evenements.json")
    var evts = await response.json()
    afficherListeEvts(evts)
}
lstEvenements()
 
selectTriDate.addEventListener('change', (evts) => {
    lstEvenements(evts)
    triParDate(evts)
    afficherListeEvts(evts)
})
 
//Classe par date Française en ascendant ou descendant
//suivant le choix utilisateur dans le select
const triParDate = (evts) => {
    if (selectTriDate.value == 1) {
       evts = evts.sort(triDateFrDesc(evts))      
       return evts
    }
    if (selectTriDate.value == 2) {
       evts = evts.sort(triDateFrAsc(evts))
        return evts          
    }
    function triDateFrDesc(a, b) {
        dateA = new Date(a.date.split("/").reverse().join('-'));
        dateB = new Date(b.date.split("/").reverse().join('-'));
        return (dateA < dateB) ? 1 : -1;
    }
 
    function triDateFrAsc(a, b) {
        dateA = new Date(a.date.split("/").reverse().join('-'));
        dateB = new Date(b.date.split("/").reverse().join('-'));
        return (dateA > dateB) ? 1 : -1;
    }
}
 
const afficherListeEvts = (evts) => {
    const html = evts.map(evt => {
        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;${evt.date}</p>
            </div>
            <div class="container">
            <h5 class="text-primary">${evt.title}</h5> 
            <div class="card-text">${evt.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
}

Bon, après plus de 20 heures d'investigations, je me suis rendu compte que l'on doit instancier de nouveau ".then" dans les fonctions externes au fetch sous peine de ne recevoir à la deuxième instanciation du résultat seulement la promise et non pas la variable contenant le tableau ou objet :

J'ai donc séparé la fonction "lstEvenements" contenant le fetch et je fais un '.then' à chaque fois que je veux récupérer le tableau/objet venant du fichier JSON dans une autre fonction en ayant besoin,voici le code complet :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
let divNewsList = document.querySelector('.news-list')
let selectTriDate = document.querySelector('#triDateEvenement')
 
window.onload = () => {
    lstEvenements()
        .then(evts => {
        evts=evts.sort(triDateFrDesc)
            afficherListeEvts(evts)
        })
}
 
const lstEvenements = async (evts) => {
    let response = await fetch("./json/evenements.json")
    evts = await response.json()
    return evts
}
//Gestion du select permettant de classer par date
selectTriDate.addEventListener('change', () => {
    triParDate()
})
 
const afficherListeEvts = (evts) => {
    const html = evts.map(evt => {
        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;${evt.date}</p>
            </div>
            <div class="container">
            <h5 class="text-primary">${evt.title}</h5> 
            <div class="card-text">${evt.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
}
//Classe par date Française en ascendant ou descendant
//suivant le choix utilisateur dans le select
const triParDate = () => {
    if (selectTriDate.value == 1) {
        lstEvenements()
            .then(evts => {
                evts.sort(triDateFrDesc)
                afficherListeEvts(evts)
            })
    }
    if (selectTriDate.value == 2) {
        lstEvenements()
            .then(evts => {
                evts.sort(triDateFrAsc)
                afficherListeEvts(evts)
            })
    }
}
 
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;
}
 
function triDateFrAsc(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;
}