11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Prototype : utilisation de each avec des index non numériques

Bonjour,

Je n'arrive pas à parcourir mon tableau avec each lorsque j'ai des clés texte.


var employe = new Array();

 employe[0] = new Array();
 employe[0][0] = "Descartes";
 employe[0][1] = "Jean";
 
 
 
 employe.each(
 	function(value, index){ 
 		value.each(
			function (index1, value1){
				alert(index + ' : ' + value1+' -> '+index1);				
			}
		)
	}
);


ceci fonctionne

alors que : 

var employe = new Array();

 employe[0] = new Array();
 employe[0]["nom"] = "Descartes";
 employe[0]["prenom"] = "Jean";
 
 
 
 employe.each(
 	function(value, index){ 
 		value.each(
			function (index1, value1){
				alert(index + ' : ' + value1+' -> '+index1);				
			}
		)
	}
);

ne fonctionne pas

si quelqu'un à une réponse, merci d'avance car je souhaiterai utiliser la librairie rico qui dépend de prototype et donc, j'essaye de me mettre à prototype, et j'aimerai utiliser des tablesaux avec clés texte.

Merci
Modifié par damjal (01 Oct 2006 - 17:32)
Modérateur
Bonjour,

Es-tu sûr de ce que tu veux faire ?

Au cas où tu n'y as pas fait attention :

Prototype = 53ko
Rico = 88ko

soit un poids total de page de 141ko avant même que tu n'ais mis quoi que ce soit dedans. Une page accessible doit avoir un poids maximum de 100ko, codes XHTML, CSS, JS et images comprises.

Pour parcourir un tableau, il existe les boucles for et for ... in qui remplissent parfaitement ce rôle sans que tu n'ais à sortir l'artillerie lourde.

Je te laisse un exemple de script qui les emploie toutes les deux...

var oO =
{
   _Test: function()
   {
      var iI = arguments.length - 1;
      for(iI; iI >= 0; iI--) if(!arguments[iI]) return false;
      return true;
   },

   _Connect: function(elm, evType, fn, useCapture)
   {
      if(elm.addEventListener) elm.addEventListener(evType, fn, useCapture);
      else if(elm.attachEvent) elm.attachEvent('on' + evType, fn);
      else elm['on' + evType] = fn;
   },
	
   _Each: function()
   {
      var prenom = o$['prénom'];
      var nom = o$['nom'];
		
      var d = document;
      var oUl = d.createElement('ul');
      var iI = 0;
      var iTot = prenom.length;

      [#blue][b]// Exemple avec la boucle for[/b][/#]
      for(iI; iI < iTot; iI++)
      {
         var oLi = d.createElement('li');
         var oTxtLi = d.createTextNode(prenom[iI] + ' ' + nom[iI]);

         oLi.appendChild(oTxtLi);
         oUl.appendChild(oLi);
      }

      [#blue][b]// Exemple avec la boucle for ... in[/b][/#]
      for(iI in prenom)
      {
         var oLi = d.createElement('li');
         var oTxtLi = d.createTextNode(prenom[iI] + ' ' + nom[iI]);

         oLi.appendChild(oTxtLi);
         oUl.appendChild(oLi);
      }
		
      var oBody = d.getElementsByTagName('body')[0];
      oBody.appendChild(oUl);
   }
};

var o$ =
{
   'prénom':
      [
         'Pierrot','René','Alphonse','Germaine','Lucette','Christiane','Elysée','Gertrude'
      ],
   'nom':
      [
         'Lefou','Martin','Gicquel','Delabarre','Pépra','Montigne','Tayole','Colbert'
      ]
};

if(oO._Test(document.createElement,document.createTextNode,document.getElementsByTagName))
   oO._Connect(window, 'load', oO._Each, false);

Modifié par koala64 (01 Oct 2006 - 10:30)
Pour parcourir un objet ou un tableau associatif (en interne ça revient au même), c'est for...in qu'il faut utiliser.
Merci pour vos réponses, en fait le (for i in ne fonctionne pas avec prototype (cette librairie redéfinie l'objet Array...) et le script de koala donne ceci :


Pierrot Lefou
René Martin
Alphonse Gicquel
Germaine Delabarre
Lucette Pépra
Christiane Montigne
Elysée Tayole
Gertrude Colbert
function() {      var indexArray = new Array();      for ( index in this ) {
         var ignoreThis = false;
         for ( var i = 0 ; i < Rico.ArrayExtensions.length ; i++ ) {
            if ( this[index] == Rico.ArrayExtensions[i] ) {
               ignoreThis = true;               break;            }         }
         if ( !ignoreThis )            indexArray[ indexArray.length ] = index;
      }      return indexArray;   } function() {
      var indexArray = new Array();      for ( index in this ) {
         var ignoreThis = false;
         for ( var i = 0 ; i < Rico.ArrayExtensions.length ; i++ ) {
            if ( this[index] == Rico.ArrayExtensions[i] ) {
               ignoreThis = true;               break;            }         }
         if ( !ignoreThis )            indexArray[ indexArray.length ] = index;
      }      return indexArray;   }
function(item) {      for ( var i = 0 ; i < this.length ; i++ )
         if ( this[i] == item ) {            this.remove(i);            break;
         }   } function(item) {      for ( var i = 0 ; i < this.length ; i++ )
         if ( this[i] == item ) {            this.remove(i);            break;
         }   }
function(dx) {      if( isNaN(dx) || dx > this.length )         return false;
      for( var i=0,n=0; i<this.length; i++ )         if( i != dx )
            this[n++]=this[i];      this.length-=1;   } function(dx) {
      if( isNaN(dx) || dx > this.length )         return false;
      for( var i=0,n=0; i<this.length; i++ )         if( i != dx )
            this[n++]=this[i];      this.length-=1;   }
function(object) {    for (var i = 0; i < this.length; i++)
      if (this[i] == object) return i;    return -1;  } function(object) {
    for (var i = 0; i < this.length; i++)      if (this[i] == object) return i;
    return -1;  }
function() {    var values = $A(arguments);
    return this.select(function(value) {      return !values.include(value);
    });  } function() {    var values = $A(arguments);
    return this.select(function(value) {      return !values.include(value);
    });  }
function() {    return this.inject([], function(array, value) {
      return array.concat(value.constructor == Array ?
        value.flatten() : [value]);    });  } function() {
    return this.inject([], function(array, value) {
      return array.concat(value.constructor == Array ?
        value.flatten() : [value]);    });  }
function() {    return this.select(function(value) {
      return value != undefined || value != null;    });  } function() {
    return this.select(function(value) {
      return value != undefined || value != null;    });  }
function() {    return this[this.length - 1];  } function() {
    return this[this.length - 1];  }
function() {    return this[0];  } function() {    return this[0];  }
function() {    this.length = 0;    return this;  } function() {
    this.length = 0;    return this;  }
function(iterator) {    for (var i = 0; i < this.length; i++)
      iterator(this[i]);  } function(iterator) {
    for (var i = 0; i < this.length; i++)      iterator(this[i]);  }
function reverse() {    [native code]} function reverse() {    [native code]}
function() {    return this.collect(Prototype.K);  } function() {
    return this.collect(Prototype.K);  }
function(object) {    var found = false;    this.each(function(value) {
      if (value == object) {        found = true;        throw $break;      }
    });    return found;  } function(object) {    var found = false;
    this.each(function(value) {      if (value == object) {        found = true;
        throw $break;      }    });    return found;  }
function(iterator) {    var results = [];    this.each(function(value, index) {
      if (iterator(value, index))        results.push(value);    });
    return results;  } function(iterator) {    var results = [];
    this.each(function(value, index) {      if (iterator(value, index))
        results.push(value);    });    return results;  }
function (iterator) {    var result;    this.each(function(value, index) {
      if (iterator(value, index)) {        result = value;        throw $break;
      }    });    return result;  } function (iterator) {    var result;
    this.each(function(value, index) {      if (iterator(value, index)) {
        result = value;        throw $break;      }    });    return result;  }
function(iterator) {    var results = [];    this.each(function(value, index) {
      results.push(iterator(value, index));    });    return results;
  } function(iterator) {    var results = [];
    this.each(function(value, index) {
      results.push(iterator(value, index));    });    return results;  }
function() {    return '[' + this.map(Object.inspect).join(', ') + ']';
  } function() {    return '[' + this.map(Object.inspect).join(', ') + ']';  }
function() {    var iterator = Prototype.K, args = $A(arguments);
    if (typeof args.last() == 'function')      iterator = args.pop();
    var collections = [this].concat(args).map($A);
    return this.map(function(value, index) {
      iterator(value = collections.pluck(index));      return value;    });
  } function() {    var iterator = Prototype.K, args = $A(arguments);
    if (typeof args.last() == 'function')      iterator = args.pop();
    var collections = [this].concat(args).map($A);
    return this.map(function(value, index) {
      iterator(value = collections.pluck(index));      return value;    });  }
function() {    return this.collect(Prototype.K);  } function() {
    return this.collect(Prototype.K);  }
function(iterator) {    return this.collect(function(value, index) {
      return {value: value, criteria: iterator(value, index)};
    }).sort(function(left, right) {
      var a = left.criteria, b = right.criteria;
      return a < b ? -1 : a > b ? 1 : 0;    }).pluck('value');
  } function(iterator) {    return this.collect(function(value, index) {
      return {value: value, criteria: iterator(value, index)};
    }).sort(function(left, right) {
      var a = left.criteria, b = right.criteria;
      return a < b ? -1 : a > b ? 1 : 0;    }).pluck('value');  }
function(iterator) {    var results = [];    this.each(function(value, index) {
      if (!iterator(value, index))        results.push(value);    });
    return results;  } function(iterator) {    var results = [];
    this.each(function(value, index) {      if (!iterator(value, index))
        results.push(value);    });    return results;  }
function(property) {    var results = [];    this.each(function(value, index) {
      results.push(value[property]);    });    return results;
  } function(property) {    var results = [];
    this.each(function(value, index) {      results.push(value[property]);
    });    return results;  }
function(iterator) {    var trues = [], falses = [];
    this.each(function(value, index) {
      ((iterator || Prototype.K)(value, index) ?
        trues : falses).push(value);    });    return [trues, falses];
  } function(iterator) {    var trues = [], falses = [];
    this.each(function(value, index) {
      ((iterator || Prototype.K)(value, index) ?
        trues : falses).push(value);    });    return [trues, falses];  }
function(iterator) {    var result;    this.each(function(value, index) {
      value = (iterator || Prototype.K)(value, index);
      if (value <= (result || value))        result = value;    });
    return result;  } function(iterator) {    var result;
    this.each(function(value, index) {
      value = (iterator || Prototype.K)(value, index);
      if (value <= (result || value))        result = value;    });
    return result;  }
function(iterator) {    var result;    this.each(function(value, index) {
      value = (iterator || Prototype.K)(value, index);
      if (value >= (result || value))        result = value;    });
    return result;  } function(iterator) {    var result;
    this.each(function(value, index) {
      value = (iterator || Prototype.K)(value, index);
      if (value >= (result || value))        result = value;    });
    return result;  }
function(method) {    var args = $A(arguments).slice(1);
    return this.collect(function(value) {
      return value[method].apply(value, args);    });  } function(method) {
    var args = $A(arguments).slice(1);    return this.collect(function(value) {
      return value[method].apply(value, args);    });  }
function(memo, iterator) {    this.each(function(value, index) {
      memo = iterator(memo, value, index);    });    return memo;
  } function(memo, iterator) {    this.each(function(value, index) {
      memo = iterator(memo, value, index);    });    return memo;  }
function(object) {    var found = false;    this.each(function(value) {
      if (value == object) {        found = true;        throw $break;      }
    });    return found;  } function(object) {    var found = false;
    this.each(function(value) {      if (value == object) {        found = true;
        throw $break;      }    });    return found;  }
function(pattern, iterator) {    var results = [];
    this.each(function(value, index) {      var stringValue = value.toString();
      if (stringValue.match(pattern))
        results.push((iterator || Prototype.K)(value, index));    })
    return results;  } function(pattern, iterator) {    var results = [];
    this.each(function(value, index) {      var stringValue = value.toString();
      if (stringValue.match(pattern))
        results.push((iterator || Prototype.K)(value, index));    })
    return results;  }
function(iterator) {    var results = [];    this.each(function(value, index) {
      if (iterator(value, index))        results.push(value);    });
    return results;  } function(iterator) {    var results = [];
    this.each(function(value, index) {      if (iterator(value, index))
        results.push(value);    });    return results;  }
function (iterator) {    var result;    this.each(function(value, index) {
      if (iterator(value, index)) {        result = value;        throw $break;
      }    });    return result;  } function (iterator) {    var result;
    this.each(function(value, index) {      if (iterator(value, index)) {
        result = value;        throw $break;      }    });    return result;  }
function(iterator) {    var results = [];    this.each(function(value, index) {
      results.push(iterator(value, index));    });    return results;
  } function(iterator) {    var results = [];
    this.each(function(value, index) {
      results.push(iterator(value, index));    });    return results;  }
function(iterator) {    var result = true;    this.each(function(value, index) {
      if (result = !!(iterator || Prototype.K)(value, index))
        throw $break;    });    return result;  } function(iterator) {
    var result = true;    this.each(function(value, index) {
      if (result = !!(iterator || Prototype.K)(value, index))
        throw $break;    });    return result;  }
function(iterator) {    var result = true;    this.each(function(value, index) {
      result = result && !!(iterator || Prototype.K)(value, index);
      if (!result) throw $break;    });    return result;
  } function(iterator) {    var result = true;
    this.each(function(value, index) {
      result = result && !!(iterator || Prototype.K)(value, index);
      if (!result) throw $break;    });    return result;  }
function(iterator) {    var index = 0;    try {
      this._each(function(value) {        try {
          iterator(value, index++);        } catch (e) {
          if (e != $continue) throw e;        }      });    } catch (e) {
      if (e != $break) throw e;    }  } function(iterator) {    var index = 0;
    try {      this._each(function(value) {        try {
          iterator(value, index++);        } catch (e) {
          if (e != $continue) throw e;        }      });    } catch (e) {
      if (e != $break) throw e;    }  }
function(object) {    return Object.extend.apply(this, [this, object]);
  } function(object) {    return Object.extend.apply(this, [this, object]);  }
Pierrot Lefou
René Martin
Alphonse Gicquel
Germaine Delabarre
Lucette Pépra
Christiane Montigne
Elysée Tayole
Gertrude Colbert


On voit apparaitre les méthodes de l'objet array, y'a du Rico aussi... compliqué !

par contre, la première partie fonctionne bien avec la boucle for. je pense que c'est parce que tu utilise ici un objet et non pas un Array ? me trompe-je ?
En tous les cas merci pour ton script, il me montre à quel point je débute en JS !

Je vais maintenant essayer que le script me retourne "nom" et "prénom" ...

Merci encore
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modérateur
Je crois qu'on s'est mal compris damjal... Il semble que tu n'ais même pas lu la première partie de mon message... Smiley ohwell

T'occupes-tu de l'accessibilité ou mets-tu ça au second plan ?

Dois-je en déduire que tu n'y comprends rien pour reprendre l'exemple tel quel ? Je ne t'ai jamais dis de l'intégrer à tes scripts... Il s'agissait d'essayer de comprendre...

Tu dis débuter en JS et tu te sers de ces librairies... Autant dire de suite que tu fais n'importe quoi... Merci donc de répondre à ces deux questions avant de poursuivre...
Modifié par koala64 (01 Oct 2006 - 14:55)
Pour répondre à ta question
a écrit :

Es-tu sûr de ce que tu veux faire ?

Ce que je veux faire, c'est juste parcourir mon tableau, et en effet j'ai bien compris que le "each" n'était pas utile puisque la boucle for fonctionne bien, je te remercie pour ta remarque.

Maintenant pour ta deuxième question
a écrit :

T'occupes-tu de l'accessibilité ou mets-tu ça au second plan ?

Oui, l'accessibilité est une chose importante et j'ai besoin d'en tenir compte car mon questionnement initial fait partie du dévelopemment d'un site à part entière, qui devra donc tenir compte des différents navigateurs. (si j'ai bien compris cette question)

Je développe en php et voudrais rendre mes sites plus dynamique avec plus de Javascript, et avec Ajax.

Pour remettre mon post dans le contexte, je voudrais, à partir d'un fichier texte sur le serveur contenant l'arborescence d'un menu (arborescence à deux niveaux) pouvoir générer un menu en javascript (j'aimerai utiliser le format JSON).
Je pense obtenir le contenu de mon fichier avec php, puis stocker ces données dans un tableau Javascript afin de les exploiter pour générer le menu.
Modifié par damjal (01 Oct 2006 - 15:43)
Modérateur
damjal a écrit :
Oui, l'accessibilité est une chose importante et j'ai besoin d'en tenir compte car mon questionnement initial fait partie du dévelopemment d'un site à part entière, qui devra donc tenir compte des différents navigateurs. (si j'ai bien compris cette question)
Et bien dans ce cas, ne t'embête pas avec Prototype ou Rico et optimise tes scripts. Ces bibliothèques rendent tes pages inaccessibles. Le problème n'est pas vraiment de l'ordre de la compatibilité avec les différents navigateurs mais plus du poids trop conséquent qui feront fuir un bon nombre de visiteurs. (tous ceux qui n'ont pas le haut débit) Tu peux parfaitement développer seul des fonctions Javascript qui répondront à tes besoins et surtout qui ne te feront pas trimballer une centaine de ko inutiles.

a écrit :
Je développe en php et voudrais rendre mes sites plus dynamique avec plus de Javascript, et avec Ajax.
Ok, pas de problème vu qu'Ajax ne veut pas dire Prototype ou Rico. Tu peux en faire sans; c'est même recommandé.

a écrit :
Pour remettre mon post dans le contexte, je voudrais, à partir d'un fichier texte sur le serveur contenant l'arborescence d'un menu (arborescence à deux niveaux) pouvoir générer un menu en javascript (j'aimerai utiliser le format JSON).
Si tu n'as que des textes à transmettre via Ajax, c'est un bon choix puisque c'est jusqu'à dix fois plus rapide qu'un fichier XML et que ça ne nécessite pas de parseur supplémentaire. En revanche, l'avantage des fichiers XML est qu'ils sont extensibles, ce qui, dans le cadre d'un site complexe, peut parfois s'avérer utile.

Maintenant, ce qu'il y a de bien avec JSON, c'est qu'il est exploitable par Javascript mais aussi par PHP. Pour exploiter correctement JSON en JS, il existe un script permettant d'éviter l'emploi de la méthode eval (causant des problèmes de sécurité). A la place, tu te sers dès lors, de la méthode parseJSON.
Modifié par koala64 (01 Oct 2006 - 16:17)
Merci, génial tes infos pour parser un fichier JSON, j'étais justement dessus !

En fait l'attrait de ces librairies pour moi repose surtout pour les effets graphiques qu'elles proposent :
http://openrico.org/rico/demos.page?demo=rico_effect_size

M'enfin vu le poid de la page et le temps pour s'adapter aux fonctionnalités, je vais peut-être suivre tes conseils et les laisser tomber.

Au chargement de la page, pour récupérer les données de mon fichier texte json sur le serveur afin d'avoir le contenu de mon menu, tu me conseil php ou ajax (xmlhttprequest()) ?
Modérateur
damjal a écrit :
En fait l'attrait de ces librairies pour moi repose surtout pour les effets graphiques qu'elles proposent
Je m'en suis douté... Smiley cligne 90% de ceux qui s'en servent le font dans ce but... et c'est une erreur.

Pour t'en convaincre, je te montre un script avec lequel je m'étais amusé il y a quelques temps... (il doit pouvoir s'améliorer d'ailleurs) Comme tu peux le voir, pas besoin de ces librairies pour faire un joli petit effet. Smiley biggrin

a écrit :
Au chargement de la page, pour récupérer les données de mon fichier texte json sur le serveur afin d'avoir le contenu de mon menu, tu me conseil php ou ajax (xmlhttprequest()) ?
Pour bien faire, ton site doit être entièrement consultable sans Ajax donc PHP est indispensable à la récupération des données. Ensuite, tu peux te resservir de ton fichier JSON pour refaire ton menu mais cette fois via XHR. En somme, tu as besoin de faire les deux mais c'est PHP qui prime. Perso, le conseil que je te donne, c'est de commencer par faire tout le site sans Ajax puis, une fois fonctionnel, de l'ajouter en surcouche.
bon, je crois que tu m'a convaincu, il est sympa ton script...

tant pis pour les bibli, d'autant plus qu'il est préférable que je comprenne mieux ce que je fais avant que d'utiliser des bibli complexe.

Merci pour tes tuyaux.
Koala a fait un script lui-meme, mais ca devient également une bibliothèque, il a ses propres fonctions et astuce comme prototype.
Plutot que de réinventer la roue à chaque fois,pourquoi ne pas 'prendre' ce qui est uniquement nécessaire dans prototype ?
Modérateur
euh... Smiley confus

Quelles sont les différences entre un site fait main et un kit graphique ?
Pourquoi s'embêter avec Prototype alors qu'il existe des kits Ajax tout prêts ?

<mode type="Je pars en vrille">
Pourquoi faire la cuisine alors qu'il y a des petits plats préparés ?
Pourquoi partir en voyage plutôt que de regarder la télé ?
Pourquoi prendre un papier et un crayon ? Il existe des dessins tout faits et d'autres l'ont fait avant nous...
... etc...
</mode>

A chacun de faire son choix mais le fait est que Prototype...

<mode type="coup de gueule">
... n'est pas la crème des crèmes,
... fait croire qu'on est bon dans ce qu'on fait,
... augmente le risque d'annihiler une partie de notre potentiel créatif,
... rend très vite un site inaccessible lorsqu'on l'intègre tel quel,
... ne surprend plus les visiteurs et ne distingue en rien si on l'utilise de manière basique,
... fait de nous des assistés,
... etc...
</mode>

Si on cherche à faire l'équivalent de ce script avec Prototype, ce sera plus lourd car ça contiendra des fonctions inutiles. Je serais fort étonné qu'on ne récupère que le strict nécessaire, qu'on n'ait pas besoin d'y retoucher et j'aimerais bien voir le temps passé pour y arriver... Rares seront ceux qui gagneront du temps... Smiley cligne

Le fait est que je n'ai pas cherché à réinventer la roue mais simplement à faire...
Modifié par koala64 (02 Oct 2006 - 22:06)
Sujet clos
Aller à