Exercice : Appliquer la notion

On veut formater l'adresse d'un lieu en France. On met en place le code suivant contenant les informations du lieu dans un objet JavaScript.

1
const addressInformation = {
2
  geometry: {
3
    coordinates: [
4
      2.29391,
5
      48.876318
6
    ],
7
    type: 'Point'
8
  },
9
  properties: {
10
    city: 'Paris',
11
    citycode: '75117',
12
    context: '75, Paris, Île-de-France',
13
    district: 'Paris 17e Arrondissement',
14
    id: '75117_0413',
15
    importance: 0.5812644699670191,
16
    label: "Rue de l'Arc de Triomphe 75017 Paris",
17
    name: "Rue de l'Arc de Triomphe",
18
    postcode: '75017',
19
    score: 0.6892058609060925,
20
    type: 'street',
21
    x: 648211.84,
22
    y: 6864264.35
23
  },
24
  type: 'Feature'
25
}
26
27
console.log('Ville : ' + addressInformation.city)
28
console.log('Contexte : ' + addressInformation.context)
29
console.log('Voie : ' + addressInformation.name)
30
console.log('Code Postal : ' + addressInformation.postcode)
Question
Exécuter ce code dans la console Firefox en mode de saisie multi-lignes.
Qu'obtient-on comme résultat ? Celui-ci est-il correct ?
Solution
On obtient le résultat suivant :
1
Ville : undefined
2
Contexte : undefined
3
Voie : undefined
4
Code Postal : undefined
Ce résultat n'est pas correct : il semblerait que les champs addressInformation.city, addressInformation.context, addressInformation.name et addressInformation.postcode ne soient pas définis.
Question
Inspecter la valeur de addressInformation dans la console de Firefox grâce à un point d'arrêt défini avant l'affichage.
Où se trouvent les champs addressInformation.city, addressInformation.context, addressInformation.name, et addressInformation.postcode dans l'objet addressInformation ?
Solution
On inspecte la valeur d'addressInformation ainsi :
Ces champs se trouvent dans l'attribut properties de addressInformation.
Question
Corriger le script en changeant l'accès aux composantes de addressInformation pour corriger le problème.
Exécuter le script obtenu. Quel affichage obtient-on ?
Solution
On modifie le code final pour faire apparaître properties. Le code final est :
1
const addressInformation = {
2
  geometry: {
3
    coordinates: [
4
      2.29391,
5
      48.876318
6
    ],
7
    type: 'Point'
8
  },
9
  properties: {
10
    city: 'Paris',
11
    citycode: '75117',
12
    context: '75, Paris, Île-de-France',
13
    district: 'Paris 17e Arrondissement',
14
    id: '75117_0413',
15
    importance: 0.5812644699670191,
16
    label: "Rue de l'Arc de Triomphe 75017 Paris",
17
    name: "Rue de l'Arc de Triomphe",
18
    postcode: '75017',
19
    score: 0.6892058609060925,
20
    type: 'street',
21
    x: 648211.84,
22
    y: 6864264.35
23
  },
24
  type: 'Feature'
25
}
26
27
console.log("Ville : " + addressInformation.properties.city)
28
console.log("Contexte : " + addressInformation.properties.context)
29
console.log("Voie : " + addressInformation.properties.name)
30
console.log("Code Postal : " + addressInformation.properties.postcode)
On obtient :
1
Ville : Paris
2
Contexte : 75, Paris, Île-de-France
3
Voie : Rue de l'Arc de Triomphe
4
Code Postal : 75017