[class JS] Return d'une valeur dans une fonction et la réutiliser dans une autre

Version imprimable

04/12/2023, 09h56
sylvain257

[class JS] Return d'une valeur dans une fonction et la réutiliser dans une autre

Bonjour,

J'ai une application front-end dans lequel j'ai une couche avec les entreprises (donnée ponctuelle) qui sont géolocalisées sur une carte (map).

Quand je clique sur un point, j'ai une fiche qui s'ouvre à l'aide d'une modale et dans lequel j'ai un formulaire de mise à jour.

J'ai créé une classe JS "Entreprise" dans laquelle j'ai un constructeur ayant comme paramètres les données natives de l'entreprise, tq le nom, l'adresse, le numéro de tel, etc.

J'ai plusieurs fonctions à l'intérieur de cette classe. Dans l'une d'elles, je récupère une valeur 'intérêt' de 1 à 5 (fonction rate())

J'ai une autre fonction qui permet de mettre à jour le formulaire (function update()) A l'intérieur de cette fonction, on retrouve une requête ajax, dans laquelle on retrouve la liste des paramètres et notamment cette valeur citée précédemment.

Le problème c'est que je n'arrive pas à récupérer la valeur retournée par la fonction rate() dans la fonction update(). La requête AJAX plante systématiquement.

A l'intérieur d'une classe, comment récupérer une valeur d'une fonction pour l'utiliser dans une autre ?

Merci pour vos retours.

Bonne journée,

Sylvain
04/12/2023, 11h24
SpaceFrog

Je vois ... Je vois Dans ma boule de crisal ... un bout de code ?
Si si là en bas à droite..

Ha ben non c'est le prix que j'ai oublié d'enlever ...

peux-tu nous faire une POC de la structure de ton code ? j'ai du mal a suivre

sinon, pour retourner une valeure, tu fais juste une methode publique (ou alors je n'ai pas compris ton probleme)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 class classA { #a = 'private A'; constructor() { } getA() { return this.#a; } } const maClassA = new classA(); maClassA.getA(); // retourne 'private A'

J'ai ça :

Ma classe telle qu'elle est déclaré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
class Carte {
    constructor({reference = "", intitule = "", annee = "", interest = ""}){
        this.reference = reference,
        this.intitule = intitule,
        this.annee = annee,
        this.interest = interest
    }
 
add(){  /// qui permet d'afficher les informations dans une div
 
document.getElementById("info_carte").innerHTML = 
`<form action="" id="cpa_edit">
<div><input type="text" id="fd_reference" value="${this.reference}"></div>
<div><input type="text" id="fd_intitule" value="${this.intitule}"></div>
<div class="my-rating">${this.interest}"</div>
<button type="submit">Soumettre</button>
</form>`
 
}
 
rate(){ /// j'utilise ici la notation par étoiles jQuery avec starRating
$(".my-rating").starRating({
            useFullStars: true,
            emptyColor:'transparent',
            strokeColor: 'black',
            starSize: 22,
            readOnly: false,
            hoverColor:'grey',
            activeColor:'black',
            ratedColor:'gold',
            ratedColors:'yellow',
            useGradient:false,
            initialRating: this.interest,
            disableAfterRate:false,
            onClick: function(currentIndex, currentRating, $el){
                return currentRating;
            }
        });
}
 
update(){
        $.ajax({
            url:"monfichier.php?",
            type:"POST",
            data:{
                "reference":$("fd_reference").val(),
                "intitule":$("fd_intitule").val(),
                "interest":this.interest ?? currentRating //// et c'est là que systématiquement ça renvoie "currentRating" is not defined
            },
            success:function(data){
                M.toast({html: 'Données de la carte mises à jour !', displayLength: 5000, classes: 'toast_success'});
            },
            error:function(err){
                M.toast({html: 'Erreur :' + err, displayLength: 5000, classes: 'toast_error'});
            }
        })
    }
}

et la nouvelle instance de classe donne ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
            var carte = new Carte({
                reference : donnee_reference,
                intitule : donnee_intitule,
                interest : donnee_interest
            })
 
carte.add();
 
            $("#cpa_edit").on('submit', function(e){  /// Mise à jour fiche
                e.preventDefault();
                carte.update();
            })

N'étant pas développeur professionnel, mais étant géomaticien faisant du développement, sûrement que je ne fais pas ça dans les règles de l'art et que certains trucs doivent faire que les pros se tirent les cheveux, que pensez-vous de mon code ?

Merci pour vos retours

Sylvain

04/12/2023, 14h12
Doksuri

est-ce que les donnes que tu recois sont correctes ?

donnee_reference, donnee_intitule, donnee_interest ?
04/12/2023, 14h55
sylvain257

Oui les données sont correctes, ce sont des données issues d'un click d'une couche de tuiles vectorielles.
(et le return de la fonction rate() renvoie correctement la donnée)
06/12/2023, 09h40
NoSmoking

Bonjour,

Citation:

(et le return de la fonction rate() renvoie correctement la donnée)

certes mais la valeur de la fonction est retournée où ?

currentRating n'est définie que dans le retour de ta fonction sur le onclick, nulle part ailleurs.
06/12/2023, 11h12
sylvain257

Oui effectivement, mais si je lui dit après il connaît pas.

Avec une portée de variable plus grande que "var", (cad sans var) ça passerait crème, mais dans les fonctions de classe, ces variables passent pour des variables non déclarées

Citation:

Oui effectivement, mais si je lui dit après il connaît pas.

si j'interprète ta pensée il semblerait que tu ais un soucis avec la portée du this pour affecter ta variable this.interest.

Si on reprend ta méthode rate(), re-indentée pour que l'on y voit plus clair :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
rate() { /// j'utilise ici la notation par étoiles jQuery avec starRating
    $(".my-rating").starRating({
        useFullStars: true,
        emptyColor: 'transparent',
        strokeColor: 'black',
        starSize: 22,
        readOnly: false,
        hoverColor: 'grey',
        activeColor: 'black',
        ratedColor: 'gold',
        ratedColors: 'yellow',
        useGradient: false,
        initialRating: this.interest,
        disableAfterRate: false,
        onClick: function(currentIndex, currentRating, $el) {
            return currentRating;
        }
    });
}

il te faut préserver le contexte, le this, pour pouvoir y accéder après exécution du click.

Un façon de faire est de créer une variable qui met en « mémoire » le this et utiliser celle-ci dans le retour de la fonction.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
rate() {
    const thisObj = this;                  // préserve le contexte
    $(".my-rating").starRating({
        // ...
        initialRating: this.interest,     // ici le this est le bon 
        disableAfterRate: false,
        onClick: function(currentIndex, currentRating, $el) {
            //mise à jour propriété via thisObj
            thisObj.interest = currentRating;
        }
    });
}

07/12/2023, 12h05
sylvain257

Merci pour ce retour. Mais du coup où se trouve le return ? (par ce qu'il doit être sorti du onclick)
07/12/2023, 17h43
NoSmoking

Citation:

Mais du coup où se trouve le return ?

Pourquoi vouloir mettre un return à tout prix, ce que l'on attend c'est une action sur un événement.

Citation:

(par ce qu'il doit être sorti du onclick)

Non, comment fais-tu pour savoir où retourner l'information, à l'appelant ... mais c'est le bouton, sur une action qui s’exécutera plus tard voire jamais ! La plupart du temps on utilise des fonctions dites « callback » mais tu peux mettre le traitement directement dans ta fonction en faisant attention à ce que représente le this comme dans ton cas.

Pour mon info, quelle source utilises-tu pour ton starRating ?
07/12/2023, 18h12
sylvain257

C'est-à-dire que cette donnée remontée par l'event , doit alimenter une fonction AJAX de mise à jour.

Mais je met "thisObj.interest" dans ma fonction ajax de mise à jour, la fonction va planter, me disant qu'il n'a pas pu déterminer "thisObj.interest"...

Citation:

Envoyé par NoSmoking

La plupart du temps on utilise des fonctions dites « callback »

c'est à cela que servent les fonctions dites « callback », à faire suivre/remonter les données recueillies.

Code:

1
2
3
4
5
6
7
8
9
rate() {
    const thisObj = this;                  // préserve le contexte
    $(".my-rating").starRating({
        // ...
        onClick: function(currentIndex, currentRating, $el) {
            thisObj.sendNotation(currentRating);
        }
    });
}

et dans ta class une méthode sendNotation.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
sendNotation(valeur) {
    $.ajax({
        // ...
        data: {
            valeur
        },
        context: this,
        done: function(data) {
            // mise à jour variable
            this.interest = valeur;
            // traitemant de la réponse ici
            // ou via une fonction callback
        }
    })
}

ou quelque chose d'approchant.

[Edit] ligne #10 currentRating devient valeur

07/12/2023, 18h51
sylvain257

2 pièce(s) jointe(s)

Alors j'ai un truc comme ça, je sais pas trop si c'est dans les règles de l'art, mais ça semble fonctionner.

Pièce jointe 647570

La question est : cette valeur redescendue au click (qui se cache derrière le "thisObj.newrating(currentRating)"), je dois la récupérer dans une autre classe pour une fonction de mise à jour.

Pièce jointe 647571

Merci :-)
12/12/2023, 14h30
NoSmoking

Je vois avec satisfaction que tu tiens compte des commentaires qui te sont faits :mrgreen:

Citation:

Envoyé par NoSmoking

#1 : merci de mettre le code, entre balises [CODE][/CODE], dans la discussion plutôt que des images. Il est ainsi plus facile de faire des copies de code pour test ou citation.

Citation:

je dois la récupérer dans une autre classe pour une fonction de mise à jour.

tu n'as jamais entendu parlé des paramètres passés aux fonctions ?