Utiliser variable comme param�tre d'un �l�ment dans Map / forEach

Version imprimable

05/01/2025, 15h55
clickandgo

Utiliser variable comme param�tre d'un �l�ment dans Map / forEach
Bonjour � tous,

Dans une classe d�di�e utilisant fetch, j'ai cr�� un tableau de param�tres appel� dataKeys[] qui permet de renseigner les cl�s que l'on veut utiliser pour filtrer du data retourn� en JSON.

Dans le map ci-dessous je peux sp�cifier le premier param�tre / cl� du tableau gr�ce � l'expression 'data[this.dataKeys[0]]', cela me retourne bien un r�sultat correct, cependant, quand j'applique la m�me �criture sur l'�l�ment (el) je re�ois un "undefined"... J'ai essay� tous les styles d'�critures possibles pour qu'il soit possible de mettre en variable '[this.dataKeys[1]]' par rapport � l'�l�ment (el), rien n'y fait... Il s'ag�t bien d'un object pourtant de m�me que 'data', pourquoi cette �criture n'est t'elle pas accept�e dans le corps du map ?. Je pr�cise que data contient bien le json retourn� et que si je rentre manuellement les cl�s sp�cifi�es dans dataKeys[1] cela marche parfaitement !

Merci d'avance pour vos suggestions
Code:

1 2 3 4 data[this.dataKeys[0]].map((el) => { let recherche = el[this.dataKeys[1]]; console.log("résultat =", recherche); });
05/01/2025, 20h39
Toufik83

Bonjour,

Pour r�pondre � vos questions, il faudrait d'abord voir la structure de l'objet data et les valeurs du tableau this.dataKeys.

Il me semble aussi que ce n'est pas map qu'il vous faut pour filtrer les propri�t�s imbriqu�s d'un objet...

Bonjour et merci Toufik d'avoir r�pondu,

Il s'agissait en fait que la cl� comprenait un point au milieu ce qui n'est pas accept�, j'avais mis dans le tableau ["properties.label"] or, il faut apparemment d�composer chaque cl� s�par�e par une virgule en �crivant ["properties","label"].

J'ai cr�� deux tableaux dans ma classe : "dataKeys[] et elementKeys[]" qui servent � sp�cifier les possibles cl�s � renseigner apr�s (data) et (el) dans le forEach / Map traitant le Json retourn�.

Ce que je voudrais maintenant c'est pouvoir concat�ner les diff�rentes cl�s fournies par l'utilisateur au bon endroit en faisant une boucle sur les deux tableaux mis en variables, si j'�cris par exemple :

Code:

data[this.dataKeys[0]].map((el) => { console.log(el[this.elementKeys[0]][this.elementKeys[1]]);});

Cela marche parfaitement dans la classe mais je ne sais pas comment cr�er la boucle qui permettrait de coller les deux tableaux suivants l'objet (data) ou (el) par code / boucle apr�s "el" ou "data" comme l'exemple ci-dessus, je sais le faire en tant que string mais il faut que cela soit reconnu comme objet/tableau ici ... Une id�e ?
Cela permettant de cr�er une arborescence de cl�s tant dans data que dans l'�l�ment du forEach / Map...

Par exemple dans le cas actuel je dois acc�der � data.features et ensuite � el.properties.label ce qui correspond aux cl�s de l' API adresse g�o .fr que je renseigne cot� fonction en renseignant les deux tableaux dataKeys et elementKeys...

Ma classe est instanci�e de cette fa�on :

Code:

1
2
3
4
5
6
7
8
9
10
let resultat = new Search(
  "https://api-adresse.data.gouv.fr/search/?q=",
  "GET",
  "contacts_adresse",
  "recherche-adresse",
  ["features"],
  ["properties", "label"],
  true
).init();
console.log("Résultat = ", resultat);

Search.php :

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
export class Search {
  /**
   * @param { String } url Spécifie l'url requise (controller)
   * @param {string} method Spécifie la méthode GET ou POST
   * @param { String } searchInputId Spécifie l'id du champ de recherche ciblé
   * @param { String } resultsFieldId Spécifie l'id du champ d'affichage des résultats
   * @param {boolean} createList (false par défaut) Spécifie si le résultat doit être présenté en tant que liste dans le champ de résultats
   * @param {Array} dataKeys Spécifie les clés en première position pour (data) dans le Json reçu
   * @param {Array} elementKeys Spécifie les clés à rechercher pour chaque élément dans le forEach ou map (el)
   */
  constructor(
    url,
    method,
    searchInputId,
    resultsFieldId,
    dataKeys = [],
    elementKeys = [],
    createList = false
  ) {
    this.url = url;
    this.method = method;
    this.searchInputId = searchInputId;
    this.resultsFieldId = resultsFieldId;
    this.resultsFieldId = document.querySelector(`#${this.resultsFieldId}`);
    this.searchInputId = document.querySelector(`#${this.searchInputId}`);
    this.createList = createList;
    this.dataKeys = dataKeys;
    this.elementKeys = elementKeys;
  }
  init() {
    this.fetchData();
  }
  fetchData() {
    let response = "";
    let timeout = null;
    const formData = new FormData();
 
    this.searchInputId.addEventListener("keyup", (e) => {
      e.preventDefault();
      let recherche = this.searchInputId.value;
 
      if (recherche.length > 0) {
        if (timeout !== null) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
          rechercher(formData, recherche);
        }, 1000);
      }
    });
    const rechercher = async (formData, recherche) => {
      try {
        if (this.method === "POST") {
          formData.append("recherche", recherche);
          response = await fetch(this.url, {
            method: this.method,
            headers: { Accept: "application/json" },
            body: formData,
          });
        } else {
          response = await fetch(`${this.url}${recherche}`, {
            method: this.method,
            headers: { Accept: "application/json" },
          });
        }
 
        if (response.ok) {
          let data = await response.json();
 
          this.resultsFieldId.innerHTML = "";
          if (data || data.content !== "") {
            let dataKeyStr = "";
            let elementKeyStr = "";
 
            //Boucle sur les possibles clés concernant l'objet (data)
            for (let i = 0; i < this.dataKeys.length; i++) {
              dataKeyStr += `${this.dataKeys[i]}`;
            }
 
            //Boucle sur les possibles clés concernant l'élément (el)
            for (let i = 0; i < this.elementKeys.length; i++) {
              elementKeyStr += `${this.elementKeys[i]}`;
            }
 
            console.log("data = ", data[this.dataKeys[0]]);
 
            data[this.dataKeys[0]].map((el) => {
              console.log(el[this.elementKeys[0]][this.elementKeys[1]]);             
            });
 
            if (this.createList) {
              //Crée une liste de valeurs pour autocomplete
              // const ul = document.createElement("ul");
              //   let li = document.createElement("li");
              //   li.textContent = el.properties.label;
              //   ul.append(li);
              // this.resultsFieldId.append(ul);
            } else {
              //Affiche simplement le résultat dans le champ
              this.resultsFieldId.insertAdjacentHTML(
                "afterbegin",
                data.content
              );
            }
          } else {
            this.resultsFieldId.innerHTML = `<p class="alert">Aucun résultat trouvé avec ces termes : "${this.searchInputId.value}"</p>`;
          }
        }
      } catch (error) {
        console.log(error);
      }
    };
  }
}

Bonjour,

Il faut qu'on analyse un peu les choses avant de commencer le changement de code, parce que si je lance la requ�te https://api-adresse.data.gouv.fr/search/?q=aaa vers l'api avec le param�tre ?q=aaa, j'obtiens la r�ponse suivante

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
{
    "type": "FeatureCollection",
    "version": "draft",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    7.169277,
                    48.04387
                ]
            },
            "properties": {
                "label": "Haag 68140 Gunsbach",
                "score": 0.16531272727272728,
                "id": "68117_89zffn",
                "banId": "c6cf3aa1-fb70-4ca7-af54-8fa2444b9db6",
                "name": "Haag",
                "postcode": "68140",
                "citycode": "68117",
                "x": 1010541.22,
                "y": 6779698.99,
                "city": "Gunsbach",
                "context": "68, Haut-Rhin, Grand Est",
                "type": "street",
                "importance": 0.31844,
                "street": "Haag"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    2.280121,
                    48.910009
                ]
            },
            "properties": {
                "label": "Allée Haag 92600 Asnières-sur-Seine",
                "score": 0.12733272727272726,
                "id": "92004_3433",
                "banId": "d5734f7d-86a2-47a7-88df-ef4ef8d3e730",
                "name": "Allée Haag",
                "postcode": "92600",
                "citycode": "92004",
                "x": 647234.66,
                "y": 6868019.77,
                "city": "Asnières-sur-Seine",
                "context": "92, Hauts-de-Seine, Île-de-France",
                "type": "street",
                "importance": 0.65066,
                "street": "Allée Haag"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    6.900886,
                    49.186191
                ]
            },
            "properties": {
                "label": "Ruelle Haas 57600 Forbach",
                "score": 0.11052524475524475,
                "id": "57227_0555",
                "banId": "3aa676ac-504e-4086-9a36-908ec01f8f78",
                "name": "Ruelle Haas",
                "postcode": "57600",
                "citycode": "57227",
                "x": 984296.13,
                "y": 6905518.61,
                "city": "Forbach",
                "context": "57, Moselle, Grand Est",
                "type": "street",
                "importance": 0.52347,
                "street": "Ruelle Haas"
            }
        }
    ],
    "attribution": "BAN",
    "licence": "ETALAB-2.0",
    "query": "aaaaa",
    "limit": 5
}

En modifiant la valeur du param�tre q de 'aaa' en 'ccc' j'obtiens

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
{
    "type": "FeatureCollection",
    "version": "draft",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    8.808625,
                    41.895985
                ]
            },
            "properties": {
                "label": "CC U paese 20128 Grosseto-Prugna",
                "score": 0.11687181818181817,
                "type": "locality",
                "importance": 0.38559,
                "id": "2a130_cjcglw",
                "banId": "a3c4dc5b-d54b-4b97-ada2-f4246e410400",
                "name": "CC U paese",
                "postcode": "20128",
                "citycode": "2A130",
                "x": 1182663.57,
                "y": 6106121.37,
                "city": "Grosseto-Prugna",
                "context": "2A, Corse-du-Sud, Corse",
                "locality": "CC U paese"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    1.7547,
                    45.260129
                ]
            },
            "properties": {
                "label": "Parking CCS 19000 Tulle",
                "score": 0.11593016528925619,
                "type": "locality",
                "importance": 0.45705,
                "id": "19272_v1779z",
                "banId": "e32018c5-ae48-4ca9-a66e-43bf9a7f7a7a",
                "name": "Parking CCS",
                "postcode": "19000",
                "citycode": "19272",
                "x": 602330.81,
                "y": 6463079.41,
                "city": "Tulle",
                "context": "19, Corrèze, Nouvelle-Aquitaine",
                "locality": "Parking CCS"
            }
        }
    ],
    "attribution": "BAN",
    "licence": "ETALAB-2.0",
    "query": "ccc",
    "limit": 5
}

Ceci dit que l'api retourne seulement les objets features ayant au moins une propri�t� contenant les 2 premi�res lettres du param�tre q ('aa' ou 'cc' pour ce cas), et donc vous savez d�j� que vous recevez toujours un tableau d'objets nomm� features et que chaque �l�ment de ce tableau contient forc�ment les sous propri�t�s type,geometry et properties.

La question est : � quoi sert-elle la propri�t� dataKeys = [] dans le constructeur de la class Search qui repr�sente le param�tre ["features"] dans l'initialisation si l'utilisateur n'a pas le choix et qu'il va forc�ment parcourir data.features? , car ce n'est pas possible d'�crire par exemple ["peuImport"] et le passer en tant que valeur de la propri�t� dataKeys non?

Corrigez moi si je me trompes...

La m�me chose pour le param�tre elementKeys = [] repr�sent� par ["properties", "label"], sauf que cette fois l'utilisateur a le choix de choisir les propri�t�s qu'ils veut r�cup�rer, puisqu'ils y a plusieurs possibilit�s feature.type, feature.geometry, feature.geometry.type, feature.geometry.coordinates, feature.properties, feature.properties.(les autres items), mais si vous insistez, on va essayer de trouver une solution.

J'ai compris que vous essayez d'appliquer un autocomplete � la zone de texte de recherche, et que vous souhaitez afficher une liste en fonction des donn�es re�ues, et aussi que la classe Search retourne un objet qu'on peut exploiter dans les scripts JS, c'est �a ?

13/01/2025, 16h48
clickandgo

Merci beaucoup Toufik d'avoir r�pondu

En fait par utilisateur je voulais dire d�veloppeur, celui qui connaitrait d'avance les cl�s � utiliser et qui les renseignerait dans les deux tableaux possibles ...

Malgr� toutes mes exp�rimentations, il para�t difficile par code de produire des cha�nes comme pr�fixes du fetch du genre :

data +[cl�1][cl�2] ... etc ou bien aucune cl�...

J'ai essay� en utilisant des cha�nes avec backtits mais ce n'est pas correctement interpr�t� dans le fetch, bloquant tout le code car ce n'est pas reconnu comme correct...

Il doit y avoir une solution mais je ne la connais pas encore...