Discussion :

[Hervé Saladin]

Bonjour,
j'ai un bug surprennant qui se produit aussi bien sous Firefox que Chrome :

dans un module ES6, je remplis un tableau associatif avec des données issues d'une requête HTTP vers une API REST (donc je ne code pas en dur ni les clés ni les valeurs de ce tableau, ce sont les données retournées par l'API).

J'ai un bout de code de la forme :

Code :

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

1
2
3
4
5
6
7
let monTableau = new Array();
 
for(let i = 0; i < donneesSources.length; i++) {
    let cle = donneesSources[i].toto;
    let valeur = donneesSources[i].titi;
    monTableau[cle] = valeur;
}

Tout se passe bien, jusqu'à ce que la boucle for tombe sur un cas particulier ou - manque de pot - donneesSources[i].toto vaut la chaîne "length" (ce qui est permis du point de vue de mon API REST).

=> Et là, c'est le drame !

Uncaught RangeError: Invalid array length

On dirait que l'interprêteur considère que j'essaie de faire :

Code :

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

monTableau.length = valeur;

avec valeur qui n'est pas un entier.

=> Alors qu'en réalité, j'essaie de faire :

Code :

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

monTableau["length"] = valeur;

ce qui n'est pas du tout la même chose de mon point de vue, mais on dirait que JS ne fait pas la différence.

Comble du bonheur, si j'essaie de faire une recherche Google avec les mots-clés "Javascript", "Array", "length" ou "RangeError" je n'obtiens que des résultats sans aucun rapport avec mon problème.

=> Avez-vous déjà rencontré ce bug ?
=> Est-ce normal que JS ne fasse pas la différence entre monTableau.length et monTableau["length"] ?
=> Avez-vous des astuces pour contourner "proprement" ce problème sachant que je ne choisis pas le contenu de cle ni valeur ?

Merci d'avance pour votre aide

[SpaceFrog]

tu as un tableau avec un seul élément

=> length=1

premier élément indexe [0]

ta boucle doit se faire jusqu'à length - 1

[Hervé Saladin]

Ben, c'est pour ça que dans mon for je mets la condition :

Code :

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

i < donneesSources.length

avec un "<" pour "strictement inférieur", donc l'interpréteur sort de la boucle lorsque i atteint donneesSources.length.

Mais de toutes façons ce n'est pas le pb, c'est bien la ligne

Code :

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

monTableau[cle] = valeur;

qui déclenche l'erreur, et encore : uniquement lorsque cle vaut "length", comme décrit dans mon message (si tu le relis autrement qu'en diagonale )

[SpaceFrog]

Arf pas vu le strictement inférieur

Code :

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

 cle = donneesSources[i].toto;

vaut quoi ?

[Hervé Saladin]

Ben justement : "length" ! Et c'est bien le problème !!!

[SpaceFrog]

Oui donc tu essayes de mettre dans une "clef" length d'un array une valeur string ...

Or la "clef" "length" est en fait une propriété qui existe déjà sur un array et attend un integer ...


Je ne sais pas si cela peut convenir à ton besoin mais si tu changes la case de ta "clef"

Code :

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

1
2
3
4
5
6
7
8
9
10
11
let donneesSources=[{"toto": "Length","titi":"name"}]
let monTableau = [];
 
for(let i = 0; i < donneesSources.length; i++) {
    let cle = donneesSources[i].toto;
    console.log(cle);
    let valeur = donneesSources[i].titi;
    console.log(valeur);
   monTableau[cle] = valeur;
}
console.log(monTableau);

[javatwister]

Salut,

Et tu peux inverser clé / valeur dans ton tableau de sortie? Si les données sont compatibles, ça va "résoudre" le problème (en fait, il faudrait que chaque valeur de titi soit unique... peu probable;

Sinon, tu reproduis la structure du tableau d'objets:

Code javascript :

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

monTableau.push({cle,valeur});

[SpaceFrog]

Oui en plus JT a raison...
ta boucle ne fera que modifier à chaque fois une clef existante donc tu n'auras jamais que les dernières valeurs dans ton tableau

https://jsfiddle.net/smLdy7x5/

il est aussi possible de modifier la clef afin qu'elle ne vienne pas interférer avec les propriété existantes de l'array ...

Code :

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

 let cle = "_"+donneesSources[i].toto;

[Hervé Saladin]

Oui donc tu essayes de mettre dans une "clef" length d'un array une valeur string ...
Or la "clef" "length" est en fait une propriété qui existe déjà sur un array et attend un integer ...

Oui c'est bien ça ... perso je trouve ça totalement hallucinant cette confusion entre propriété de l'objet et clé du tableau, ça rend l'utilisation des tableaux associatifs en JS hyper casse-gueule !!!

'fin bon bref, le language est ce qu'il est, faut bien faire avec.

Et tu peux inverser clé / valeur dans ton tableau de sortie?

Malheureusement non : le code que je vous ai posté est simplifié mais en réalité les valeurs sont des objets ...

Sinon, tu reproduis la structure du tableau d'objets:

Code :

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

monTableau.push({cle,valeur});

Oui, c'est comme ça que ça va se finir je sens, mais c'est super chiant, c'est plus un tableau associatif, du coup je ne peux plus accéder aux valeurs avec un simple monTableau[cle], il faut que je fasse une boucle pour tester toutes les clés ... faisable mais si je peux éviter ...

[SpaceFrog]

Teste si l'array n'a pas déja cette 'clef' = propriété native avec hasOwnProperty

sinon passe par des JSON ...

[SpaceFrog]

du coup je ne peux plus accéder aux valeurs avec un simple monTableau[cle],

ben si https://jsfiddle.net/smLdy7x5/1/

Mais bon la boucle écrase l'existant ... a voir si cela convient à ton besoin

[Hervé Saladin]

Teste si l'array n'a pas déja cette 'clef' = propriété native avec hasOwnProperty

Je veux bien, mais vu que les clés ET valeurs viennent d'une source de données externe à mon code, si hasOwnProperty me dit que la clé est utilisée, je suis bien avancé : ensuite je fais quoi ?

sinon passe par des JSON ...

Je ne vois pas le rapport ... est-ce que tu peux développer un peu ou donner un lien STP ?

du coup je ne peux plus accéder aux valeurs avec un simple monTableau[cle],

ben si https://jsfiddle.net/smLdy7x5/1/

Ah oui, du coup ce n'est plus techniquement un tableau associatif mais un "Object", mais c'est assez proche d'utilisation, je crois que je vais partir là-dessus.

[Hervé Saladin]

Mais bon la boucle écrase l'existant ... a voir si cela convient à ton besoin

C'était déjà le cas avec mon code initial, mais dans mon cas ce n'est pas un souci car dans les données sources les cles sont uniques.

[SpaceFrog]

sinon passe par des JSON ...

Code :

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

let monTableau = {};

c'est un un JSON (JavaScript Object Notation) objet ...

[Hervé Saladin]

Bon, merci pour vos réponses, ça marche bien avec un bête Object, donc je marque le post comme résolu.

Mais pour "ouvrir le débat", vous ne trouvez pas que c'est tout pourri du coup les tableaux associatifs en JS ? Il doit y avoir une bonne raison mais elle m'échappe ...

[Hervé Saladin]

vous ne trouvez pas que c'est tout pourri du coup les tableaux associatifs en JS ? Il doit y avoir une bonne raison mais elle m'échappe ...

Je me répond à moi-même, car je crois avoir compris : en fait, en Javascript les tableaux associatifs ... n'éxistent pas !
On peut - dans une certaine mesure - utiliser un Object "comme si" c'était un tableau associatif, mais c'est tout.
Et si on utilise un Array, on bénéficie de l'interface d'Object dont Array descend (donc ça marche jusqu'à un certain point), mais on ajoute aussi des propriétés pouvant entrer en collision avec l'utilisation qu'on cherche à faire, comme moi avec "length".

Donc conclusion : oui, c'est tout pourri, mais maintenant je sais pourquoi ... on en apprend tous les jours (mais c'est quand-même tout pourri)

[SpaceFrog]

mais on ajoute aussi des propriétés pouvant entrer en collision

avec les propriétés natives de l'objet ... oui

[javatwister]

en bouclant avec for ... of, pas de problème pour les propriétés natives;