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

Jean Sérien
Javascript

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

 data[this.dataKeys[0]].map((el) => {
                let recherche = el[this.dataKeys[1]];
                console.log("résultat =", recherche);  
              });

4 réponses

Aecy

Hello, ça vient probablement du fait que la clé définie dans this.dataKeys[1] n'existe pas dans l'objet el, ce qui explique pourquoi tu reçois undefined. Pour éviter ça, tu peux vérifier si la clé existe :

data[this.dataKeys[0]].map((el) => {
    if (el.hasOwnProperty(this.dataKeys[1])) {
        let recherche = el[this.dataKeys[1]];
        console.log("résultat =", recherche);
    } else {
        console.log("Clé inexistante dans l'élément:", this.dataKeys[1]);
    }
});

Je n'ai pas testé, car difficile de tester sans avoir tout le code

Jean Sérien
Auteur

Bonjour et merci 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 apparament 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 à specifier 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 :

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éér la boucle qui permettrait de coller les deux tableaux suvants 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...

Aecy

Re, tu devrais peut-être essayé de faire une fonction utilitaire récursive qui accède dynamiquement aux clés imbriquées spécifiées de tes tableaux dataKeys et elementKeys

Petit snippet 🥳

function getNestedValue(obj, keys) {
    return keys.reduce((acc, key) => acc && acc[key], obj);
}

Ce qui permettrait surement d'assurer les entrées de tes tableaux dans ce genre :

data[this.dataKeys[0]].map((el) => {
    let nestedData = getNestedValue(el, this.elementKeys);
    // reste du code...
});
Jean Sérien
Auteur

Merci beaucoup d'avoir répondu

Je vais essayer ça mais il faut que ça soit utilisable pour "data" ou toute autre dénomination puis les clés enfants...

Il manque aussi à traiter le cas ou il n'y a pas besoin de clé ...