JS: en utilisant eval sur une fonction en essayant de passer un tableau en paramètre, mais il jette une erreur

Question

Je veux créer un formulaire généré dynamique en utilisant javascript, tout fonctionne bien, jusqu'à ce que j'essaie de passer un tableau en paramètre. Quand je fais cela, une erreur se produit. Quelqu'un peut-il expliquer ce que c'est?

Heres mon code:

var loadFrm = function(component) { 
    for(nItem in component) { 
     var myComponent = "add" + firstToUpper(component[nItem].type); 
    var callComponent = myComponent + "(" + component[nItem].opt + ");"; 
    eval(callComponent); 
    } 
} 

var json = [ 
    { 
     type: "scale", 
     opt: {content: [{label: "male", value: "m"}, {label: "female", value: "f"}]} 
    } 
]; 

loadFrm(json); 

Modifier Voici l'erreur:

missing ] after element list 
[Break on this error] addScale([object Object]); 

Answer 1

Si vous utilisez un débogueur pour regarder la chaîne callComponent, vous trouverez probablement ressemble à quelque chose comme ceci:

addScale([object Object])

.. .which n'est pas ce que tu veux. En effet, vous appelez effectivement toString sur votre objet opt, et l'objet par défaut toString sur des objets ressemble à cela. L'erreur eval est due à une syntaxe incorrecte.

De manière générale, chaque fois que vous pensez avoir besoin d'utiliser eval, il y a certainement une meilleure réponse. Dans ce cas, il semble que vous essayez d'appeler une fonction et que vous transmettez opt. En supposant que ces fonctions sont "globaux", vous pouvez le faire comme ceci:

var loadFrm = function(component) { 
    var nItem, functionName; 

    for (nItem = 0; nItem < component.length; ++nItem) { 
     functionName = "add" + firstToUpper(component[nItem].type); 
     window[functionName](component[nItem].opt); 
    } 
} 

Live example

Notes sur ce qui précède:

1. Ne pas utiliser for..in à boucle à travers des réseaux à moins que vous really know what you're doing . for..in n'énumère pas les index d'un tableau, il énumère les propriétés d'un objet. Nous recherchons la fonction par son nom à l'aide de window[functionName]. Cela fonctionne parce que les "globals" sont en fait les propriétés de l'objet window, et vous pouvez rechercher des propriétés en utilisant un nom de chaîne pour eux en utilisant la notation entre parenthèses.
2. Après avoir obtenu la fonction via window[functionName], nous l'appelons simplement directement, en passant dans l'objet opt plutôt qu'une forme de chaîne de celui-ci. Je suppose que addScale s'attend à voir un objet.
3. J'ai déplacé tous les var vers le haut de la fonction parce que c'est là où ils sont vraiment (details).
4. Si vous le pouvez, je vous recommande de déplacer addScale et les fonctions associées à leur propre objet plutôt que de les mettre window. L'espace de noms window est déjà assez bondé. Here's the live example modifié pour ne pas ajouter de symboles à window du tout, en plaçant à la place la fonction addScale sur un objet appelé functions et en l'utilisant à partir de là.

---

hors sujet: La syntaxe var loadFrm = function(component) crée une fonction anonyme qu'il attribue ensuite à une variable. Ceci est beaucoup utilisé, mais à moins que vous ne créiez différentes fonctions basées sur une condition, par ex.:

var f; 
if (...) { 
    f = function() { ... }; 
} 
else { 
    f = function() { ... }; 
} 

... ce n'est pas réellement utile. (Si vous créer différentes fonctions basées sur une condition comme ça, alors ce n'est pas seulement utile, c'est nécessaire.) I recommend using named functions autant que possible, car une fonction avec un nom aide vos outils à vous aider en vous montrant le nom de la fonction en erreur messages, piles d'appels, etc.

hors-sujet 2: Vous avez une variable appelée json, mais votre information, il est de ne pas utiliser la notation JSON. Il utilise une combinaison de notation JavaScript et de notation littérale d'objet, qui est un surensemble de JSON. Vous verrez beaucoup de gens confus à ce sujet, je le mentionne parce que vous avez dit que vous étiez nouveau et que ça vaut la peine de le pincer dans l'œuf. :-) JSON est purement une notation. (Un très utile.)

Answer 2

Utilisez ceci:

fn = eval(functionName); 
fn(objParameter)