tableaux Associatif en javascript

Question

j'ai cet objet:

function formBuddy() 
{ 
    var fields = new Array(); 
    var labels = new Array(); 
    var rules = new Array(); 
    var count=0; 

    this.addField = function(field, label, rule) 
    { 
     fields[count] = field; 
     labels[field] = label; 
     rules[field] = rule; 
     count = ++count; 
    } 
} 

Son utilisés de cette manière:

var cForm=new formBuddy(); 
cForm.addField("c_first_name","First Name","required"); 
cForm.addField("c_last_name","Last Name","required"); 

Le problème est, dans la fonction addField() le tableau fields est réglée correctement (peut-être parce que un index numérique est utilisé pour s'y référer) mais les deux autres tableaux (labels et rules) ne sont pas touchés du tout. Faire un console.log les montre comme vides dans firebug.

Que dois-je changer pour les faire fonctionner? Je voudrais toujours me référer aux règles et aux étiquettes par l'index de la chaîne du champ.

Answer 1

Utilisez les objets à la place:

function formBuddy() 
{ 
    var fields = {}; 
    var labels = {}; 
    var rules = {}; 
    var count = 0; 

    this.addField = function(field, label, rule) 
    { 
     fields[count] = field; 
     labels[field] = label; 
     rules[field] = rule; 
     count++; 
    } 
} 

---

Mais comme Christoph already mentioned, je stockerait ces informations dans une seule structure de données aussi. Par exemple:

function formBuddy() { 
    var fields = {}; 
    this.addField = function(name, label, rule) { 
     fields[name] = { 
      name: name, 
      label: label, 
      rule: rule 
     }; 
    }; 
    this.getField = function(name) { 
     return fields[name]; 
    }; 
} 

var cForm=new formBuddy(); 
cForm.addField("c_first_name","First Name","required"); 
cForm.addField("c_last_name","Last Name","required"); 
alert(cForm.getField("c_last_name").label); 

Answer 2

Les tableaux sont traités comme des objets Javascript, donc votre morceau de code fonctionne, il est juste que console.log de Firebug pas vous montrer les « objets » à l'intérieur du tableau, plutôt seulement les valeurs du tableau .. .

utilisez le for(var i in obj) pour voir quels objets les valeurs du tableau contient:

function formBuddy() { 
    var fields = new Array(); 
    var labels = new Array(); 
    var rules = new Array(); 
    var count=0; 

    this.addField = function(field, label, rule) 
    {   
     fields[count] = field; 
     labels[field] = label; 
     rules[field] = rule; 
     count = ++count; 

     for(var i in labels) { 
      console.log(labels[i]); 
     } 
     for(var i in rules) { 
      console.log(rules[i]); 
     } 

     console.log(labels.c_last_name); 
     // or 
     console.log(labels["c_last_name"]); 
    } 
} 

var cForm = new formBuddy(); 
cForm.addField("c_last_name","Last Name","required"); 

Answer 3

fields doit être un tableau, alors que labels et rules doivent être des objets que vous souhaitez utiliser cordes comme clés. En outre, addField() est le même pour chaque instance de FormBuddy() (noms des fonctions constructeur doivent être capitalisées) et doivent résider dans le prototype, à savoir

function FormBuddy() { 
    this.fields = []; // this is the same as `new Array()` 
    this.labels = {}; // this is the same as `new Object()` 
    this.rules = {}; 
} 

FormBuddy.prototype.addField = function(field, label, rule) { 
    this.fields.push(field); 
    this.labels[field] = label; 
    this.rules[field] = rule; 
}; 

Vous pouvez accéder aux étiquettes/règles via

var buddy = new FormBuddy(); 
buddy.addField('foo', 'bar', 'baz'); 
alert(buddy.labels['foo']); 
alert(buddy.rules.foo); 

---

Juste pour Enragé encore Luca;), voici une autre version qui dosn't aussi tout résumer:

function FormBuddy() { 
    this.fields = []; 
} 

FormBuddy.prototype.addField = function(id, label, rule) { 
    var field = { 
     id : id, 
     label : label, 
     rule : rule 
    }; 

    this.fields.push(field); 
    this['field ' + id] = field; 
}; 

FormBuddy.prototype.getField = function(id) { 
    return this['field ' + id]; 
}; 

var buddy = new FormBuddy(); 
buddy.addField('foo', 'label for foo', 'rule for foo'); 

Il est similaire à la deuxième version de Gumbo, mais son objet fields est fusionné dans l'instance FormBuddy. Un tableau appelé fields est ajouté à la place pour permettre une itération rapide.

Pour accéder à une étiquette de champ, une règle ou id, utilisez

buddy.getField('foo').label 

Pour parcourir les champs, utilisez

// list rules: 
for(var i = 0, len = buddy.fields.length; i < len; ++i) 
    document.writeln(buddy.fields[i].rule);