Transformation de code en objet

Version imprimable

Hello !

Voilà je souhaite transformé mon code en objet afin de m'exercer, cependant j'ai du mal à comprendre comment appeler une méthode, je crois que je confond un peu tout notamment les méthodes et les fonctions.

Voici mon code qui est censé afficher une map avec des marqueurs à l'aide d'une API.

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
75
76
77
78
 
let xhr = new XMLHttpRequest();
 
xhr.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=xxxxxxx&apiKey=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
 
xhr.addEventListener('load', function() {
 
    if (xhr.status >= 200 && xhr.status < 400) {
        ma_callback(xhr.responseText);
 
    } else {
        ma_callback(xhr.status);
    }
});
 
xhr.addEventListener('error', function() {
 
    console.log("erreur de connexion");
 
});
 
xhr.send(null);
 
let carte = {
    lat: 43.6044,
    lng: 1.4442,
    zoom: 13,
    mapContainer: 'mapid',
    mymap: '',
    displayMap: '',
    addTo: '',
    idMap: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoidGhyb3VkIiwiYSIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    layer: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
 
    init() {
      this.mymap = L.map(this.mapContainer, {center: [this.lat, this.lng], zoom: this.zoom});
    },
 
    display() {
      this.displayMap = L.tileLayer(this.layer, {id: this.idMap, accessToken: this.accessToken})
    },
 
    ajout() {
      this.addTo = addTo(this.mymap)
    },
 
    callback : function(response) {
      response = JSON.parse(response);
      response.forEach(function (info) {
      L.marker(
          [info.position.lat, info.position.lng],
          {            
            "jcdecauxInfo": info}// On ajoute une option au marker qui a pour propriété jcdecauxInfo et comme valeur info
        )
        .on('click', onMarkerClick)// Fonction d'appel lors du click
        .addTo(mymap)
        .bindPopup(info.name);
      });
    },
 
    onMarkerClick : function(arg) {
  // Récupération du marker concerné
      let marker = arg.target;
  // Récupération des infos
      let info = marker.options.jcdecauxInfo;
      let address = info.address;
      let bikeStands = info.bike_stands;
      let availableBikes = info.available_bikes;
      let statusStation = info.status;
  // Affichage du rendu avec la méthode "document.getElementById" qui permet le renvoi d'un élément
      document.getElementById("info-station").style.display = "block";// Apparition du bloc contenant les infos de la station sélectionnée
      document.getElementById("adresse-station").innerText = address;
      document.getElementById("place-libre").innerText = bikeStands;
      document.getElementById("velo-dispo").innerText = availableBikes;
      document.getElementById("etat-station").innerText = statusStation;
    } 
};

Merci par avance.

Bonjour,

Citation:

j'ai du mal à comprendre comment appeler une méthode, je crois que je confond un peu tout notamment les méthodes et les fonctions.

pour faire simple, les méthodes sont également des fonctions mais associées à un objet, ce sont des propriétés d'un objet.

Lorsque l'on écrit :

Code:

var elements = document.querySelectorAll(".la-classe");

on fait appel à la méthode querySelectorAll de l'objet Element du DOM.

Lorsque l'on écrit :
Code:

1 2 3 4 5 6 // définition de la fonction function somme( a,b){ return a+b } // appel de la fonction somme var total = somme( 10, 15);
Il existe bien sûr des différences, et entre autres, en ce qui concerne les données manipulées qui pour une fonction sont passées en paramètre alors que pour les méthodes les données manipulées peuvent être également des propriétés de l'objet lui même.

Un exemple, basique, d'objet (class depuis ES6) et surtout l'appel aux méthodes pour que cela serve à quelque chose :
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 class Player { constructor(nom) { this.nom = nom || "unknow"; this.score = 0; } incScore(nombre) { let inc = nombre || 1; this.score += Math.abs(inc); } decScore(nombre) { let inc = nombre || 1; this.score -= Math.abs(inc); if (this.score < 0) { this.score = 0; } } getScore() { return this.nom + " a " + this.score + " point" + (this.score > 1 ? "s" : "") + " au compteur."; } } // création const player1 = new Player("Paul"); const player2 = new Player("Pierre"); const player3 = new Player(); // appel des méthodes player1.incScore(20); player2.incScore(13); console.log(player1.getScore()); // > "Paul a 20 points au compteur." console.log(player1.score); // > 20 console.log(player2.getScore()); // > "Pierre a 13 points au compteur." console.log(player2.score); // > 13 console.log(player3.getScore()); // > "unknow a 0 point au compteur." console.log(player3.score); // > 0
Citation:

Voici mon code qui est censé afficher une map avec des marqueurs à l'aide d'une API.

De ce que l'on voit il n'y que la définition mais pas l'action !
Est-ce nécessaire d'ailleurs dans ce cas précis de créer un objet, un « namespace » me paraît suffisant ?

Ressources :

Classes (MDN)
Fonctions (MDN)
Fonctions et portée des fonctions (MDN)
Espaces de noms (ou namespace) en JavaScript (DVP)

01/03/2019, 18h38
Watilin
Bonjour,
je reconnais ma suggestion ma_callback d’une précédente discussion :) L’as-tu déclarée quelque-part ? Je n’avais peut-être pas été assez clair, mais cette fonction, c’est à toi de l’écrire.

Normalement, la console devrait t’afficher un message du genre « ma_callback is undefined ». Petit rappel, c’est dans le panneau de développement qui s’ouvre avec F12 sous tous les navigateurs, puis l’onglet « console ».

:!: Mais… Peut-être qu’une API maps est un peu trop complexe pour débuter. Avec ses fonctions qui appellent d’autres fonctions, il y a de quoi s’y perdre. En fait, je pense que si on réduit à l’essentiel ton problème, il devient ceci :

Prenons une page web réduite au minimum, dépouillée même des déclarations habituelles (doctype, charset, etc.) avec seulement un bouton et un script. On place le script après le bouton pour éviter les problèmes du style « le DOM n’est pas prêt ».
Code:

1 2 <button id="le-bouton">Le bouton</button> <script src="le-script.js"></script>
Le truc qui manque au script le-script.js est simplement la déclaration d’une fonction qui est appelée quand on clique sur le bouton. Disons que cette fonction s’appelle ma_callback, mais on aurait pu choisir n’importe quel autre nom.
Code:

1 2 3 4 5 6 "use strict"; ... // à compléter : déclaration de ma_callback let leBouton = document.getElementById("le-bouton"); leBouton.addEventListener("click", ma_callback);
Et disons que cette fonction doit afficher le message « ça marche », avec alert ou console.log selon ce que tu préfères.

Une fois que tu auras fait marcher ça, tu pourras réaliser que ce n’est pas toi qui appelles ma_callback : aucun moment il n’est écrit dans le script ma_callback() avec les parenthèses. En fait, tu as juste passé une fonction au système d’évènements (via addEventListener), et c’est lui qui appelle ta fonction quand un clic a été détecté.

Plus généralement, que ce soit un évènement du DOM (click, mouseover, change, etc.) ou ajax ou autre, du moment que l’appel de ta fonction est fait par un truc extérieur, on appelle ça une fonction de rappel. Des fois on parle aussi d’exécution asynchrone.

Vraiment merci de m'aider ... Mais je ne dois pas avoir l'esprit logique qu'il faut pour le développement car j'pane rien à tout cela.

J'ai fait des modifications et juste avec ce morceau de code :

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
 
"use strict";
 
let carte = {
    lat: 43.6044,
    lng: 1.4442,
    zoom: 13,
    mapContainer: 'mapid',
    displayMap: '',
    addTo: '',
    idMap: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoidGhyb3VkIiwiYSI6ImNqczRndxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    layer: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
 
    init : function() {
      this.carte = L.map(this.mapContainer, {
        center: [this.lat, this.lng], 
        zoom: this.zoom,  
      })
    },
 
    display : function() {
      L.tileLayer(this.layer, {
        id: this.idMap,
        maxZoom: 18, 
        attribution: this.attribution,
        accessToken: this.accessToken,
      }).addTo(this.carte);
    },
 
    ma_callback : function(response) {
      response = JSON.parse(response);
      response.forEach(function (info) {
      L.marker(
          [info.position.lat, info.position.lng],
          {            
            "jcdecauxInfo": info}
        )
        .on('click', onMarkerClick)
        .addTo(this.carte).bindPopup(info.name);
      });
    },
 
};
 
carte.init();
carte.display();

J'ai déjà ma carte qui s'affiche (grande victoire :aie:), cependant j'ai deux erreur :

Citation:

Uncaught ReferenceError: ma_callback is not defined
at XMLHttpRequest.<anonymous> (ajax.js:11)[/CODE] et [CODE]Uncaught SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse (<anonymous>)
at Object.ma_callback (script.js:44)
at script.js:78

Citation:

Est-ce nécessaire d'ailleurs dans ce cas précis de créer un objet, un « namespace » me paraît suffisant ?

Non cela n'est pas nécessaire, cependant c'est pour un exercice et je doit développer mon code orientée objet donc pas le choix dans ce cas la.

04/03/2019, 11h43
Watilin
Bonjour,

tu as déclaré un objet carte, dans lequel il y a un certain nombre de propriétés et de méthodes. L’une de ces méthodes est ma_callback.
Code:

1 2 3 4 5 6 7 let carte = { ... ... ma_callback : function(response) { ... } };
Il faut donc utiliser carte.ma_callback. Comme tu n’as pas montré où est l’appel ajax dans la nouvelle version de ton code, je vais tenter de deviner qu’il est toujours dans un bloc xhr.addEventListener('load', ... );. Dans ce cas, il suffirait d’écrire carte.ma_callback(xhr.responseText); et carte.ma_callback(xhr.status);.

Attention, je vois un autre problème dans ton code, dans la méthode init :

Code:

this.carte = L.map(this.mapContainer, {

Il faut utiliser document.getElementById comme dans la doc :

Code:

this.carte = L.map(document.getElementById(this.mapContainer, {

Une remarque : l’objet carte que tu as déclaré est la forme la plus simple d’objet en JavaScript. On appelle ça parfois un objet littéral. Cette forme ne nécessite ni mot-clé new, ni structure class comme dans le post de NoSmoking. Comme le titre de ta dicussion parle d’objet, je me suis dit que tu aimerais savoir ce genre de choses.

À propos de ton message d’erreur JSON :

Citation:

Unexpected token u in JSON at position 0

Ce message indique qu’il y avait un caractère « u » à la position 0 de la chaîne reçue, autrement dit au début de celle-ci. A priori, la variable response contient quelque chose qui n’est pas du JSON. Je te conseille d’utiliser l’onglet réseau de la console F12 pour examiner ce que contient la réponse ajax.

Citation:

Comme tu n’as pas montré où est l’appel ajax dans la nouvelle version de ton code, je vais tenter de deviner qu’il est toujours dans un bloc xhr.addEventListener('load', ... );

En effet voici le code qui se trouve sur une autre page avec les modifications apportés :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 let xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=xxxxxxxx&apiKey=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'); xhr.addEventListener('load', function() { if (xhr.status >= 200 && xhr.status < 400) { carte.ma_callback(xhr.responseText); } else { carte.ma_callback(xhr.status); } }); xhr.addEventListener('error', function() { console.log("erreur de connexion"); }); xhr.send();
Citation:

Il faut utiliser document.getElementById comme dans la doc 

La doc jointe parle de Google Map, moi j'utilise Leaflet sa marche quand même ? Parce que quand je fait la modification ma carte n’apparaît plus j'ai un fond gris à la place.

Je n'est plus l'erreur JSON de toute à l'heure ... mais une nouvelle :

Citation:

Uncaught TypeError: Cannot read property 'carte' of undefined
at script.js:52
at Array.forEach (<anonymous>)
at Object.ma_callback (script.js:45)
at XMLHttpRequest.<anonymous> (ajax.js:11)

Ce que tu peux faire c'est mettre ton code pour la réquête dans ton objet carte, par exemple
Code:

1 2 3 4 5 loadMarkers: function() { let xhr = new XMLHttpRequest(); // ton code ... xhr.send(); },
de la sorte tu pourras y faire appel avec un carte.loadMarkers() ou en lançant la méthode directement dans la méthode display
Code:

1 2 3 4 5 6 7 8 9 display: function() { L.tileLayer(this.layer, { id: this.idMap, maxZoom: 18, attribution: this.attribution, accessToken: this.accessToken, }).addTo(this.carte); this.loadMarkerds(); },
Nota : Tu noteras que d'un côté on peut utiliser this et de l'autre il faut utiliser carte, ou une variable mise en cache.

04/03/2019, 16h41
Hoobux

Citation:

Nota : Tu noteras que d'un côté on peut utiliser this et de l'autre il faut utiliser carte, ou une variable mise en cache.

Merci je ne savais pas.

Après avoir mis mon code pour la requête dans mon objet carte, et en fessant appel à la méthode directement depuis la méthode display j'ai cette erreur :

Citation:

Uncaught TypeError: Cannot read property 'carte' of undefined
at script.js:79
at Array.forEach (<anonymous>)
at Object.ma_callback (script.js:72)
at XMLHttpRequest.<anonymous> (script.js:53)
04/03/2019, 17h22
NoSmoking

Il serait bon que tu nous remettes le code de ton objet carte.

Citation:

Il serait bon que tu nous remettes le code de ton objet carte.

Désolé le voici :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
"use strict";
 
let carte = {
    lat: 43.6044,
    lng: 1.4442,
    zoom: 13,
    mapContainer: 'mapid',
    displayMap: '',
    addTo: '',
    idMap: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoidGhyb3VkIiwiYSI6ImNqczRndjIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    layer: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
 
    init : function() {
      this.carte = L.map(this.mapContainer, {
        center: [this.lat, this.lng], 
        zoom: this.zoom,  
      })
    },
 
    display : function() {
      L.tileLayer(this.layer, {
        id: this.idMap,
        maxZoom: 18, 
        attribution: this.attribution,
        accessToken: this.accessToken,
      }).addTo(this.carte);
      this.loadMarkers();
    },
 
    loadMarkers : function() {
      let xhr = new XMLHttpRequest();
 
      xhr.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=Toulouse&apiKey=ddaf955496241ed6e6f7aa8e998b982be31b0064');
 
      xhr.addEventListener('load', function() {
 
        if (xhr.status >= 200 && xhr.status < 400) {
          carte.ma_callback(xhr.responseText);
 
        } else {
          carte.ma_callback(xhr.status);
      }
 
      });
 
      xhr.addEventListener('error', function() {
 
      console.log("erreur de connexion");
 
      });
 
      xhr.send();
    },
 
    ma_callback : function(response) {
      response = JSON.parse(response);
      response.forEach(function (info) {
      L.marker(
          [info.position.lat, info.position.lng],
          {            
            "jcdecauxInfo": info}
        )
        .on('click', onMarkerClick)
        .addTo(this.carte)
        .bindPopup(info.name);
      });
    },
 
    onMarkerClick : function(arg) {
 
      let marker = arg.target;
 
      let info = marker.options.jcdecauxInfo;
      let address = info.address;
      let bikeStands = info.bike_stands;
      let availableBikes = info.available_bikes;
      let statusStation = info.status;
 
      document.getElementById("info-station").style.display = "block";// Apparition du bloc contenant les infos de la station sélectionnée
      document.getElementById("adresse-station").innerText = address;
      document.getElementById("place-libre").innerText = bikeStands;
      document.getElementById("velo-dispo").innerText = availableBikes;
      document.getElementById("etat-station").innerText = statusStation;
    } 
 
};

C'est donc bien un problème de à qui se rapporte le this dans ta fonction ma_callback, pas à celui que tu crois ;)
Pour que cela fasse le boulot tu dois remplacer this par carte
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ma_callback: function(response) { console.log( "this en entrée :", this); // pour tracer response = JSON.parse(response); response.forEach(function(info) { console.log( "this dans forEach :", this); // pour tracer L.marker( [info.position.lat, info.position.lng], { "jcdecauxInfo": info } ) .on('click', carte.onMarkerClick) // <= WARNING //.addTo(this.carte) // le this n'est pas celui que tu crois (undefined) .addTo(carte.carte) .bindPopup(info.name); }); },
J'attire également ton attention sur la ligne où tu affectes un événement au marker, il te faut faire référence à carte.onMarkerClick et non à onMarkerClick tout court.

Ressource :
comme tu as soif d'apprendre ...

L'opérateur this (sur MDN)

05/03/2019, 09h36
Hoobux

Citation:

C'est donc bien un problème de à qui se rapporte le this dans ta fonction ma_callback, pas à celui que tu crois
Pour que cela fasse le boulot tu dois remplacer this par carte

Parce que l'on souhaite se rapporter à l'objet carte lui même, le carte. qui remplace mon this vaut la valeur de l'objet, la valeur de this n'est plus la même.

Merci à toi en tout cas, c'est beaucoup plus clair mais je vais quand même me plonger dans la lecture de tout ça :aie: