Discussion :

[JeanPPPP]

Bonjour,

Je suis confronté à un problème, j'ai depuis une carte svg récupéré un (au clique) id et je souhaiterais le comparer à ma data contenu dans un fichier json.

Pour faire simple je veux comparer l'id de l’élément sur lequel j'ai cliqué aux données contenus dans mon fichier json pour filtrer le résultat de ma liste déroulante.

Pour récuperer l'id :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(oPath.id);

Pour comparer et remplir la liste déroulante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
        case 'departement':
            liste = getDataFromTable('department_code=' + valeur, tbl_ville);
            valeur = updateSelect('ville', liste, 'name', 'name');
            chainSelect('ville');
            break;

Seulement après de multiples recherches je ne trouve pas la solution, j’espère que vous pourrez m'aider.

[NoSmoking]

Bonjour,
ta demande ne m'apparaît pas clairement

Il te suffit de faire correspondre ton oPath.id, que tu récupères au clic, avec une entrée dans ton fichier JSON.

[JeanPPPP]

En relisant ce que j'ai écris, il est vrai que se n'est pas clair du tout

Pour mieux expliquer ce que je souhaite faire je vais décomposer ma pensée en plusieurs étapes.

Etape 1 : J'ai mis en place une carte SVG qui affiche les régions.

Etape 2 : Cette carte est cliquable, lorsque je clique sur une région cette dernière apparaît via un "innerHtml". La carte est de type SVG et elle comporte les différents départements qui sont chacun représentés via un "path" qui inclut un id.

Etape 3 : Je récupère l'id au clic sur le département vers la console.

Etape 4 : Une fois cet id récupéré je veux le lier à un formulaire avec une liste déroulante (avec option de recherche et auto-complétion style barre de recherche google). MAIS je veux filtrer les villes qui seront accessibles, c'est-à-dire que le formulaire ne doit proposer que des villes qui appartiennent à ce département d'où la compatibilité entre l'id du clique sur le département et l'id de fichier JSON.

Pour être encore plus claire, c'est une sorte de cascade : je choisis ma région sur ma carte SVG -> j'affiche les départements de ma région via une carte SVG -> je clique sur mon département -> actualisation de ma liste déroulante avec les villes qui appartiennent a ce département (options d’écriture avec auto-complète style barre de recherche google).

Voici mon code pour récupérer l'id :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("mapSvg").addEventListener('click', function (oEvent) {
        let oPath = oEvent.target,
            oSvg = this.firstElementChild;
        if (oSvg.id == "svg4668") {
            //Recupère id du path
            console.log(oPath.id);
            this.innerHTML = changeMap(oPath.id)
        } else if (oSvg.id == "departements") {
            console.log(oPath.id);
        }
    })
 
})

Une des cartes qui est affichée, ici le clique sur la région du Grand Est affiche cette carte SVG, c'est en cliquant sur un des "path" représentant les départements que l'on récupère l'id :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<svg xmlns="http://www.w3.org/2000/svg" viewBox="400 80 250 200" id="departements">
    <path data-nom="Ardennes" id="08" class="region-44 departement departement-08 departement-ardennes" d="m469.91,88.14l0.79,0.26l9.8,0.4l7.3-3.2l1.1-6 l4-3.8l2.8-0.2v3.8L494,81l-0.6,5.2l3.3,4.5l-1,2.4l0.6,3.1l1.4,1.9l3.3-0.9l4.3,2.4l2.8,3.8l4.9,0.6l2,1.7l-0.9,2.4l2.1-0.13 l-1.6,1.13l-2,2.7l-5.7-2.1l-1.9,2l0.8,8.8l-3.2,5.1l1.4,2.5l-4.2,3.6v0.1l-20.1-1.9l-9.8-6.6l-6.7-0.9l-0.3-14.3l2.7-0.3l5-7.2 l-1.3-3.1l1.3-3.5L469.91,88.14z"></path>
    <path data-nomf="Aube" id="10" class="region-44 departement departement-10 departement-aube" d="m442.2,186.9l-3.6-1.5l-0.4-8.5l2.9-0.8l3-5 l3.2,4.5l9,1.2v-3.3l9.5-7.6l6.5-0.9l3.1,0.5l0.4,6.1l2.6,2c1.9,0.8,3.8,1.5,5.6,2.3l2.5-1.5l3.3,1.1l-0.6,3.4l2.4,5.2l5.6,3 l0.5,9.9l-0.1,2.7l-5.6,2.5l0.2,4.8l-3.9-0.5l-4.7,3.9l-6.1,0.9l-2.2,2l-2.9-1.4l-12.6,1.6l-5-10.9l-3.6-4.1l-2,2.2l-2.5-8.3 L442.2,186.9z"></path>
    <path data-nom="Marne" id="51" class="region-44 departement departement-51 departement-marne" d="m440.6,158.9l0.4-2l7.7-10.2l-2.5-1.3l0.8-2.7 l-1.6-2.4l5.5-2.3l-3.2-8l1.2-2.6l8-4l5.3,1.8l1-2.8l6.7,0.9l9.8,6.6l20.1,1.9l2.2,9l-1,4.1l2.6,1.3l-0.6,3.9l-3.1,1.1l-1.1,5.8 l3.2,4.6l0.5,4.1l-8.6,2.2l2.2,2.5l-2.3,2.2l0.7,2.9h-4.7l-3.3-1.1l-2.5,1.5c-1.8-0.8-3.7-1.5-5.6-2.3l-2.6-2l-0.4-6.1l-3.1-0.5 l-6.5,0.9l-9.5,7.6v3.3l-9-1.2l-3.2-4.5l-2.6-1.7l-3.5-8.3L440.6,158.9z"></path>
    <path data-nom="Haute-Marne" id="52" class="region-44 departement departement-52 departement-haute-marne" d="m493.9,167.9l8.6-2.2l3.4,5.2l16.9,10.4 l-2.4,2.3l12.7,9.5l-1.7,8.6l5.5,4.7l0.2,3.1l2.7-1.1l1.3,2.5v0.1l0.2,1.4l-2.3,3.2l-2.9-0.3l-2,2.4l-0.3,8.3l-3.2,1l-2.1-1.8 l-6.6,3.9l-1.2,2.5l-4.8,1.9v-2.8l-3-1.6l-9.2-2l-2.3-4.8l2.8-2.4l-1-3.1l-1.8-2.2l-2.9-0.3l0.3-2.9l-2.6-1l-0.5-2.7l-3.5-0.7 l-0.2-4.8l5.6-2.5l0.1-2.7l-0.5-9.9l-5.6-3l-2.4-5.2l0.6-3.4h4.7l-0.7-2.9l2.3-2.2L493.9,167.9z"></path>
    <path data-nom="Meurthe-et-Moselle" id="54" class="region-44 departement departement-54 departement-meurthe-et-moselle" d="m588.2,170.9l1.9,1.3l-1.5,0.4l-10.6,7.6l-6.1-1.6l-1.6-2.7l-5.3,3.8 l-6,1l-2.4-1.8l-5.4,2l-1.1,2.8l-5.7,0.7l-4.1-4.8l0.1-2.9l-5.8-0.6l0.2-2.9l-2.5-2l1.7-2.8l-1.3-8.6l2.2-13.8l0.9-2.7l-4.9-11.5 l1.5-5.9l-1.2-2.7l-4.4-4.8l-5.3,2l-0.7-5.3l4.8-1.7l2-1.9h6.8l2.54,2.31L539.6,124l2.5,1.6l1.2,3.6l-1.7,3.1l1,5.6l-2.8,0.1 l4.3,7.5l11.5,4l-0.3,2.9l2.7,5.1l8.5,1.5l5.3,3.9l14.4,5.3L588.2,170.9z"></path>
    <path data-nom="Meuse" id="55" class="region-44 departement departement-55 departement-meuse" d="m516.2,107.97l1.2-0.07l1.5,1.6l1.9,5.6 l0.7,5.3l5.3-2l4.4,4.8l1.2,2.7l-1.5,5.9l4.9,11.5l-0.9,2.7l-2.2,13.8l1.3,8.6l-1.7,2.8l2.5,2l-0.2,2.9l-1.9,2.3l-3-0.5l-6.9,3.4 l-16.9-10.4l-3.4-5.2l-0.5-4.1l-3.2-4.6l1.1-5.8l3.1-1.1l0.6-3.9l-2.6-1.3l1-4.1l-2.2-9v-0.1l4.2-3.6l-1.4-2.5l3.2-5.1l-0.8-8.8 l1.9-2l5.7,2.1l2-2.7L516.2,107.97z"></path>
    <path data-nom="Moselle" id="57" class="region-44 departement departement-57 departement-moselle" d="m539.6,124l-2.65-10.19l0.65,0.59h2.4l1.5,2.1 l2.3,0.7l2.3-0.5l1-2.3l2-1.2l2.2-0.2l4.5,2.3l4.9-0.1l3.1,3.8l2.3,1.9l-0.5,2l3.7,3.2l2.8,4.5v2.3l4.2,0.7l1.2-1.9l-0.3-2.4 l2.6-0.2l3.8,1.8l1.4,3.5l2.1-1.5l2.5,1.9l5.8-0.4l5.3-4.2l2.2,1.4l0.5,2.1l2.4,2.4l3.2,1.5h0.03l-1.73,4.4l-1.4,2.6l-8.9,0.3 l-9.1-4.6l-0.8-2.8l-5,10.8l5.5,2.4l-1.6,2.5l2.3,1.7l1.3-2.5l3,0.3l4.3,3.4l-3,13.3l-2.3,1.8l-3.4-0.3l-2-2.7l-14.4-5.3l-5.3-3.9 l-8.5-1.5l-2.7-5.1l0.3-2.9l-11.5-4l-4.3-7.5l2.8-0.1l-1-5.6l1.7-3.1l-1.2-3.6L539.6,124z"></path>
    <path data-nom="Bas-Rhin" id="67" class="region-44 departement departement-67 departement-bas-rhin" d="m631.8,140.7l-2.8,9.4l-7.8,10.5l-2,1.5l-1.4,3.3l0.3,4.9l-2.4,7.2 l0.7,3.6l-1.5,2l-1.2,5.5l-3.16,6.23L605.9,193l-0.3-2.8l-8.5-5.6l-3.1-0.2l-5.2-2.2l1.3-10l-1.9-1.3l3.4,0.3l2.3-1.8l3-13.3 l-4.3-3.4l-3-0.3l-1.3,2.5l-2.3-1.7l1.6-2.5l-5.5-2.4l5-10.8l0.8,2.8l9.1,4.6l8.9-0.3l1.4-2.6l1.73-4.4l8.87,0.6l2.4-0.6 L631.8,140.7z"></path>
    <path data-nom="Haut-Rhin" id="68" class="region-44 departement departement-68 departement-haut-rhin" d="m605.9,193l4.64,1.83l-0.04,0.07v5.3l1.6,1.9 l0.2,3.4l-2.2,11.1l0.1,6.7l1.8,1.5l0.6,3.5l-2.2,2l-0.2,2.3l-3.1,0.9l0.5,2.2l-1.5,1.6h-2.7l-3.8,1.4l-3-1.1l0.3-2.5l-2.4-1.1 l-0.4,0.1l-2-5l-2.8,0.2l-0.5-9l-7.6-5l2.8-2.4v-6.2l4.8-7.8l4.1-13.5l1.1-1l3.1,0.2l8.5,5.6L605.9,193z"></path>
    <path data-nom="Vosges" id="88" class="region-44 departement departement-88 departement-vosges" d="m520.4,183.6l2.4-2.3l6.9-3.4l3,0.5l1.9-2.3 l5.8,0.6l-0.1,2.9l4.1,4.8l5.7-0.7l1.1-2.8l5.4-2l2.4,1.8l6-1l5.3-3.8l1.6,2.7l6.1,1.6l10.6-7.6l1.5-0.4l-1.3,10l5.2,2.2l-1.1,1 l-4.1,13.5l-4.8,7.8v6.2l-2.8,2.4l-0.9,0.6l-8.4-6.6l-5.1,2.2l-4.9-3.6l-5.8,1.6l-7-4.3l-8,5.8v-0.1l-1.3-2.5l-2.7,1.1l-0.2-3.1 l-5.5-4.7l1.7-8.6L520.4,183.6z"></path>
</svg>

Mon code pour la liste déroulante dans mon index :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p>
            <label>Ville : </label>
            <select id="ville"></select>
            <span class="nombre"></span>
</p>

Enfin mon fichier 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
var tbl_ville = [
 
    {
        "id": 1,
        "department_code": "01",
        "insee_code": "01001",
        "zip_code": "01400",
        "name": "L'Abergement-Clémenciat",
        "slug": "l abergement clemenciat",
        "gps_lat": 46.15678199203189,
        "gps_lng": 4.92469920318725
  },
    {
        "id": 2,
        "department_code": "01",
        "insee_code": "01002",
        "zip_code": "01640",
        "name": "L'Abergement-de-Varey",
        "slug": "l abergement de varey",
        "gps_lat": 46.01008562499999,
        "gps_lng": 5.42875916666667
  } ...

Donc je veux comparer mon id récupéré au code du département du JSON ici : "department_code":...
Cette comparaison a pour but de filtrer les résultats de la liste déroulante qui comportera le nom de la ville, dans le JSON il s'agit de "name".

J’espère que mes explications sont plus claires et que vous pourrez m'aider à résoudre ce problème qui m'occupe depuis une semaine.

Je vous remercie par avance d'avoir pris le temps de lire ce long paragraphe et de m'aider.

[NoSmoking]

Etape 2 : Cette carte est cliquable, lorsque je clique sur une région cette dernière apparaît via un "innerHtml". La carte est de type SVG et elle comporte les différents départements qui sont chacun représentés via un "path" qui inclut un id.

Il serait peut-être plus opportun de mettre tes différentes région dans des groupes, <g></g> , et de les afficher ou non via un display:none/block par exemple.

Etape 4 : Une fois cet id récupéré je veux le lier à un formulaire avec une liste déroulante (avec option de recherche et auto-complétion style barre de recherche google). MAIS je veux filtrer les villes qui seront accessibles, c'est-à-dire que le formulaire ne doit proposer que des villes qui appartiennent à ce département d'où la compatibilité entre l'id du clique sur le département et l'id de fichier JSON.

La démarche est tout à fait valable !

Lorsque j'ai eu à faire cela je n'ai pas utilisé des ID numérique, déconseillée, mais sous cette forme :

• Département : D_numéro-Département
• Région : R_numéro-région

Donc je veux comparer mon id récupéré au code du département du JSON ici : "department_code":...
Cette comparaison a pour but de filtrer les résultats de la liste déroulante qui comportera le nom de la ville, dans le JSON il s'agit de "name".

C'est cette approche que j'ai montré dans Créer des listes déroulantes liées entre elles sans utiliser Ajax, mais peut-être l'as tu déjà lu.

Il te faut simplement pousser le concept un peu plus loin en y ajoutant une base tbl_villes comme on le voit dans ton fichier JSON.

Je pourrais éventuellement mettre en ligne, en aménageant sûrement un peu, ce que j'avais fait qui n'est pas très loin de ce que tu cherches à faire.

[JeanPPPP]

Bonjour,

Tout d'abord merci de votre réponse.

Concernant votre méthode, j'ai exploité votre tutoriel qui était très bien expliqué. En revanche j'ai fais en sorte de l'adapter pour pouvoir cliquer sur le département au lieu d'utiliser la liste déroulante. Cela signifie que je récupère l'id au clic sur la carte et je souhaite le comparer à ma table ville.

Ainsi, je me retrouve à présent face au problème pour relier mon choix du département et de la ville.

Ma table :

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
 
var tbl_ville = [
 
    {
        "id": 1,
        "department_code": "01",
        "insee_code": "01001",
        "zip_code": "01400",
        "name": "L'Abergement-Clémenciat",
        "slug": "l abergement clemenciat",
        "gps_lat": 46.15678199203189,
        "gps_lng": 4.92469920318725
  },
    {
        "id": 2,
        "department_code": "01",
        "insee_code": "01002",
        "zip_code": "01640",
        "name": "L'Abergement-de-Varey",
        "slug": "l abergement de varey",
        "gps_lat": 46.01008562499999,
        "gps_lng": 5.42875916666667
  },
 
...

Voici un lien pour comprendre l'idée : https://codepen.io/Zonecss/pen/bGdOPKK

J’espère que vous pourrez m'aider.
Je vous remercie par avance.

[NoSmoking]

En revanche j'ai fais en sorte de l'adapter pour pouvoir cliquer sur le département au lieu d'utiliser la liste déroulante.

L'un n'empêche pas l'autre, il faut simplement le prévoir.

je me retrouve à présent face au problème pour relier mon choix du département et de la ville.

Il faut que tu enchaines dans ta fonction eventSelect avec une recherche/filtre dans ta table tbl_ville.

Cela pourrait se traduire par, voir commentaires dans le code :

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
36
37
38
39
40
41
42
/*
 * Quand on change un select
 * @param oEvent    Objet event toujours passé
 **/
function eventSelect(oEvent) {
  if (this.id == "region") {
    if (this.value == "") {
      // --- choisir --- 
      oMap.innerHTML = "";
      oMap.appendChild(sSvgFrance)
    }
    else {
      loadMap(this.value);
    }
    setSelect()
  }
  else if (this.id == "departement") {
    console.log("departement", this.value);
    // ici il faut lire les données
    // et renseigner les villes concernées
    const numDep = this.value;
    const searchKey = "department_code";
    // retourne les éléments répondant à la condition
    const dataVilles = tbl_villes.filter((obj) => {
      return obj[searchKey] === numDep;
    });
    // mise à jour du select
    const oSelect = document.getElementById("ville");
    // vide le select
    oSelect.options.length = 0;
    // ajoute toutes les données
    dataVilles.forEach((el) => {
      const oOption = new Option(el.name);
      oSelect.appendChild(oOption);
    })
    // désactive si aucune donnée disponible
    oSelect.disabled = dataVilles.length ? false : true;
  }
  else if (this.id == "ville") {
    // action future
  }
} //fct

Cela devrait te permettre d'avancer

[JeanPPPP]

Suite à l'étude de votre méthode, je pense avoir tout compris les commentaires ont par ailleurs été très utile.

Ainsi, j'ai essayé en vain de faire fonctionner le choix du département au clic pour provoquer le remplissage du select destiné au choix de la ville.

Néanmoins, je sais ou effectuer le changement mais je ne sais pas comment remplir le select "ville" en fonction du département.

Voici mon code :

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
function setSelect() {
    let aOptions = [],
        sSelectId = "";
    if (oMap.querySelector("#svg4668")) {
        sSelectId = "region";
        oMap.querySelectorAll("a").forEach((oEl) => {
            let sId = oEl.querySelector("path").id;
            aOptions.push([oEl.getAttribute("xlink:title"), sId]);
        })
        setOption(document.forms.liste.region, aOptions);
    } else if (oMap.querySelector("#departements")) {
        sSelectId = "departement";
        oMap.querySelectorAll("path").forEach((oEl) => {
            let sId = oEl.id;
            aOptions.push([oEl.getAttribute("data-nom") + ' (' + sId + ') ', oEl.id]);
// Je ne devrais pas faire un deuxième selectID destiné à ville ici ? Ainsi j'effectuerais le filtrage et j'utiliserais aOptions.push(oEl.getAttribute("name");
        })
        setOption(document.forms.liste.departement, aOptions);
    }
    resetSelect(sSelectId);
}

J’espérais que vous pourriez m'aider sur ce point pour que je puisse enfin faire avancer le reste de mon programme .

[NoSmoking]

Néanmoins, je sais ou effectuer le changement mais je ne sais pas comment remplir le select "ville" en fonction du département.

Je présume que tu parles d'action directe sur la carte, car sur le changement via le <select> c'est pris en compte par la fonction eventSelect.

Dans ce cas tu peux tirer avantage de la fonction eventSelect en l'appelant depuis ta fonction eventMap, il existe une méthode qui permet de le faire cela simplement : Function.prototype.apply().

Dans ce cas ta fonction devient

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
/*
 * Quand on clique sur la Map
 * @param oEvent    Objet event toujours passé
 **/
function eventMap(oEvent) {
  const oPath = oEvent.target;
  const oSvg = this.firstElementChild;
  if (this.querySelector("#svg4668")) {
    // affiche la map correspondante
    loadMap(oPath.id);
    // récup. le select des régions
    const oSelect = document.getElementById("region");
    // affectation de la valeur en cours
    oSelect.value = oPath.id;
    // application de la méthode eventSelect à l'élément selectDépartements
    eventSelect.apply(document.forms.liste.region);
  } else if (this.querySelector("#departements")) {
    // récup. le select des départments
    const oSelect = document.getElementById("departement");
    // affectation de la valeur en cours
    oSelect.value = oPath.id;
    // application de la méthode eventSelect à l'élémment selectDepartement
    eventSelect.apply(oSelect);
  }
} //fct

[JeanPPPP]

Merci !

Je vous avoue que je n'ai pas tout compris, mais je vais à présent étudier tout cela pour bien assimiler toutes ces nouvelles notions.