syntaxe avec le tableau associatif

n3x1n² · 02/05/2011, 14h47

Bonjour,

Pour la suppression un par un des éléments passés en groupe, j'ai utilisé un tableau associatif. Tout fonctionne mais j'ai un problème de syntaxe.
Voici un bout de mon code :

ligne 74, error : itemCollection[count] is undefined

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
 
function displayItems(idLeftItem,nbItem, array){
		/*
		 * nbItem : size of array
		 * 
		 * Role : browse an array
		 * 
		 */
 
		var table = '<div id="'+idLeftItem+'"><table id="table'+idLeftItem+'">';
		$('#rightList').append(table);
 
 
 
		for(var i=0; i<nbItem; i++){
			$('#table'+idLeftItem).append('<tr id="item'+array[i]['id']+idLeftItem+'"><th id="item'+idLeftItem+'" style="text-align:left; background:#eee; width:80%;">'+array[i]['label']+'</th><th style="width:20%; text-align:right; background:#eee;"><input type="button" value="X" id="del'+array[i]['id']+idLeftItem+'"/></th></tr>');
		}
 
 
		var endTable = '</table></div>';
		$('#rightList').append(endTable);
 
	}	//end_displayItem
 
 
 
function addPackage() {	
 
		//the selected item of leftList
		var $leftItem = $('#leftList option:selected');
 
		//id of the left item
		var idLeftItem = $leftItem.val();
 
		//toString of the object left item
		var textLeftItem = $leftItem.text();
 
 
		//nb d'option selected
		var nbLeftItem = $leftItem.size();
 
 
		//generated code 
		var generateRight_1 = '<div id="'+idLeftItem+'"><table><tr style="text-align:center;"><th colspan="5" style="text-align:left; background:#eee;"><b>'+textLeftItem+'</b></th><th colspan="2" style="text-align:right; background:#eee;"><input type="button" value="X" id="del'+idLeftItem+'"/></th></tr><tr height="10"><td></td></tr><tr><td><b>OS :</b></td><td>Win <input type="checkbox" id="checkWin" checked="checked"/></td><td>Lin <input type="checkbox" id="checkLin"/></td><td>Mac <input type="checkbox" id="checkMac"/></td><td>And <input type="checkbox" id="checkWin"/></td><td>iOS <input type="checkbox" id="checkIOS"/></td></tr><tr height="40"><td></td></tr></table></div>';
 
 
		var count = 0;
 
		var itemCollection = new Array();
		//if leftItem has an id
		if(idLeftItem){
 
			//if size of selected items > 1 
			if(nbLeftItem > 1){
 
				//store each item selected in the collection
				$leftItem.each(function(){					
					var item = { "id" : $(this).val(), "label" : $(this).text() };					
					itemCollection.push(item);
				});
 
 
				displayItems(idLeftItem,nbLeftItem,itemCollection);
 
 
			}//end_if
}
 
 
 
 
		//Remove a right item IN A BLOCK
		$('#del'+itemCollection[count]['id']+idLeftItem).bind("click", function(){
 
			alert("2");
 
			//add to the left list
			var generateLeft_2 = '<option value="'+idLeftItem+'">'+itemCollection[count]+'</option>' ;
 
			$('#leftList').append(generateLeft_2);
 
 
 
			//remove from the right list
			$('tr#'+itemCollection[count]+idLeftItem).remove();
 
 
		});

Merci d'avance.

Bovino · 02/05/2011, 17h49

Les tableaux associatifs n'existent pas en JavaScript. Ceux que l'on utilise sont de type Object et ne possèdent pas de propriété length.

SpaceFrog · 02/05/2011, 18h35

en l'occurrence un dirait plutot un json

=> boucle for(elt in jsonObj)

n3x1n² · 02/05/2011, 22h51

Merci Bovino et SpaceFrog, vous êtes toujours les premiers à me répondre...

Donc je ne pourrais pas remplacer par quelques choses d'autres ce

Code :

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

itemCollection[count]['id']

???

n3x1n² · 03/05/2011, 10h09

Citation:

Envoyé par Bovino

Les tableaux associatifs n'existent pas en JavaScript. Ceux que l'on utilise sont de type Object et ne possèdent pas de propriété length.

Je suis d'accord pour "length". Mais :

http://www.analyste-programmeur.com/...eau-associatif

Bovino · 03/05/2011, 10h26

Citation:

Envoyé par n3x1n²

Je suis d'accord pour "length". Mais :

http://www.analyste-programmeur.com/...eau-associatif

Je ne suis pas responsable des erreurs publiées par d'autres

Tout ce que je peux affirmer, c'est qu'en JavaScript, les objets de type Array sont uniquement numériques et possèdent des propriétés qui lui sont propres : length, concat, join, etc.
Si tu crées un objet avec uniquement des propriétés, alors, tu te retrouves avec du Canada Dry de tableau : ça ressemble à un tableau associatif, mais ça ne possède aucune des propriétés et méthodes spécifiques à un tableau. C'est et ça reste un objet !
Pour t'en convaincre :

Code :

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

1
2
3
4
var myFalseTab = [];    // Définition d'un Array
myFalseTab.toto = 'test';    // Définition d'une propriété => transtypage en Object
myFalseTab.tata = 'Autre propriété';
alert(myFalseTab.concat();    // On pourrait comme ça vérifier chaque méthode d'Array...

n3x1n² · 03/05/2011, 10h50

Oui, d'accord mais on s'éloigne du sujet.

J'ai essayé des milliers de combinaison j'arrive pas à résoudre mon problème.

Pour rentrer dans ma fonction de "delete" il faut que je mette quelque chose à la place de

Code :

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

itemCollection[count]['id']

qui me va récupérer l'id qui est dans

Code :

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

var item={..}

Loceka · 03/05/2011, 11h55

Je ne suis pas du tout familier avec jQuery mais je pense que ton problème vient du fait que ton tableau n'est pas rempli lorsque tu exécutes ce code :

Code :

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

1
2
3
4
5
var itemCollection = new Array();
$leftItem.each(function(){					
	var item = { "id" : $(this).val(), "label" : $(this).text() };					
	itemCollection.push(item);
});

Il doit y avoir un problème visibilité de "itemCollection" étant donné que t'es dans une fonction.
Essaye de définir une variable globale plutôt ou bien de mettre ton tableau dans une propriété d'un objet existant :

Code :

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

window.itemCollection = new Array();

Parce que d'après ce que je vois, ton appel itemCollection[count]['id'] me paraît bon.

Mais comme j'ai dit, je suis une bille en jQuery, si ça se trouve ça ne vient pas du tout de là.

SpaceFrog · 03/05/2011, 12h49

de l'utilisation d'un json avec eaceh en jquery:

Code :

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

1
2
3
 
var json={un:'one',deux:"two"}
$.each(json,function(index,value){alert(index +" => "+ value) })

n3x1n² · 03/05/2011, 14h39

@Loceka :
J'avais vérifié au tout début et mon tableau est bien rempli.

Sinon depuis ce matin j'ai avancé d'un demi pas en faisant des getID et et getName...

Le bouton delete "append" l’élément de droite à gauche et mais ne "remove" pas ensuite. Et ce n’est valable que pour Le premier élément passé dans le group. Sur les autres, ça ne fait rien du tout...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
 
 
function displayItems(idLeftItem,nbItem,array){
		/*
		 * nbItem : size of array
		 * 
		 * Role : to browse an array
		 */
 
		var table = '<div id="'+idLeftItem+'"><table id="table'+idLeftItem+'">';
		$('#rightList').append(table);
 
 
 
		for(var i=0; i<nbItem; i++){
			$('#table'+idLeftItem).append('<tr id="item'+array[i]['id']+idLeftItem+'"><th id="item'+idLeftItem+'" style="text-align:left; background:#eee; width:80%;">'+array[i]['label']+'</th><th style="width:20%; text-align:right; background:#eee;"><input type="button" value="X" id="del'+array[i]['id']+idLeftItem+'"/></th></tr>');
		}
 
 
		var endTable = '</table></div>';
		$('#rightList').append(endTable);
 
	}	//end_displayItem
 
 
 
 
 
 
 
	function getItemID(nbItem, array){
		/*
		 * nbItem : size of array
		 * 
		 * Role : to get the id of an item in an array
		 */
 
		for(var i=0; i<nbItem; i++){
			return array[i]['id'];
		}	
 
	}	//end_getItemID
 
 
 
 
 
 
 
	function getItemName(nbLeftItem, itemCollection){
 
		for(var i=0; i<nbLeftItem; i++){
			return itemCollection[i]['label'];
		}
 
	}	//end_getItemName
 
 
 
 
 
 
 
	function addPackage() {	
 
		//the selected item of leftList
		var $leftItem = $('#leftList option:selected');
 
		//id of the left item
		var idLeftItem = $leftItem.val();
 
		//toString of the object left item
		var textLeftItem = $leftItem.text();
 
 
		//nb d'option selected
		var nbLeftItem = $leftItem.size();
 
 
		//generated code 
		var generateRight_1 = '<div id="'+idLeftItem+'"><table><tr style="text-align:center;"><th colspan="5" style="text-align:left; background:#eee;"><b>'+textLeftItem+'</b></th><th colspan="2" style="text-align:right; background:#eee;"><input type="button" value="X" id="del'+idLeftItem+'"/></th></tr><tr height="10"><td></td></tr><tr><td><b>OS :</b></td><td>Win <input type="checkbox" id="checkWin" checked="checked"/></td><td>Lin <input type="checkbox" id="checkLin"/></td><td>Mac <input type="checkbox" id="checkMac"/></td><td>And <input type="checkbox" id="checkWin"/></td><td>iOS <input type="checkbox" id="checkIOS"/></td></tr><tr height="40"><td></td></tr></table></div>';
 
 
		var count = 0;
 
		var itemCollection = new Array();
 
 
 
		//if leftItem has an id
		if(idLeftItem){
 
 
			//if size of selected items > 1 
			if(nbLeftItem > 1){
 
				//store each item selected in the collection
				$leftItem.each(function(){
 
					var id = $(this).val();
					var label = $(this).text();				
 
					var item = { "id" : id, "label" : label };		
 
					//add items to the end of the table
					itemCollection.push(item);				
				});
 
 
				displayItems(idLeftItem,nbLeftItem,itemCollection);
 
 
				//Remove a right item IN A BLOCK
				$('#del'+getItemID(nbLeftItem,itemCollection)+idLeftItem).bind("click", function(){
 
 
					//add to the left list
					var generateLeft_2 = '<option value="'+getItemID(nbLeftItem,itemCollection)+'">'+getItemName(nbLeftItem, itemCollection)+'</option>' ;
 
					$('#leftList').append(generateLeft_2);
 
 
					//remove from the right list
					$('tr#'+getItemID(nbLeftItem,itemCollection)+idLeftItem).remove();
 
 
				});
 
			}//end_if
 
 
 
			if(nbLeftItem == 1){
				//add on the right list..
				$('#rightList').append(generateRight_1);
 
 
				//Remove a right item 
				$('#del'+idLeftItem).bind("click", function(){
 
					//add to the left list
					var generateLeft_1 = '<option value="'+idLeftItem+'">'+textLeftItem+'</option>' ;
					$('#leftList').append(generateLeft_1);
 
					//remove from the right list
					$('div#'+idLeftItem).remove();
 
				});
 
 
			}	//end_if
 
 
		}//end_if
 
 
 
		//remove the left item from left list 
		$leftItem.remove();
 
		initButton();
 
 
	} //end addPackage

n3x1n² · 03/05/2011, 15h11

Cette fois, je sors les return des for et là ça fait pareil; append mais pas de remove SUR LE 2ème élément... :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
	function getItemID(nbItem, array){
		/*
		 * nbItem : size of array
		 * 
		 * Role : to get the id of an item in an array
		 */
		var a;
		for(var i=0; i<nbItem; i++){
			a = array[i]['id'];
		}	
		return a ;
	}	//end_getItemID
 
 
 
 
 
 
 
	function getItemName(nbLeftItem, itemCollection){
 
		var b;
		for(var i=0; i<nbLeftItem; i++){
			b = itemCollection[i]['label'];
		}
		return b;
	}	//end_getItemName

Je parle comme ça mais je sais pas si vous arrivez à visualiser dans votre tête :S

02/05/2011, 17h49	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 803 Points : 35 803	Les tableaux associatifs n'existent pas en JavaScript. Ceux que l'on utilise sont de type Object et ne possèdent pas de propriété length. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

02/05/2011, 18h35	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	en l'occurrence un dirait plutot un json => boucle for(elt in jsonObj) __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/05/2011, 22h51	#4
n3x1n² Invité régulier Inscription : octobre 2007 Messages : 56 Détails du profil Informations personnelles : Âge : 23 Localisation : France, Loire Atlantique (Pays de la Loire) Informations forums : Inscription : octobre 2007 Messages : 56 Points : 8 Points : 8	Merci Bovino et SpaceFrog, vous êtes toujours les premiers à me répondre... Donc je ne pourrais pas remplacer par quelques choses d'autres ce Code : Sélectionner tout - Visualiser dans une fenêtre à part itemCollection[count]['id'] ???
	00

03/05/2011, 10h50	#7
n3x1n² Invité régulier Inscription : octobre 2007 Messages : 56 Détails du profil Informations personnelles : Âge : 23 Localisation : France, Loire Atlantique (Pays de la Loire) Informations forums : Inscription : octobre 2007 Messages : 56 Points : 8 Points : 8	Oui, d'accord mais on s'éloigne du sujet. J'ai essayé des milliers de combinaison j'arrive pas à résoudre mon problème. Pour rentrer dans ma fonction de "delete" il faut que je mette quelque chose à la place de Code : Sélectionner tout - Visualiser dans une fenêtre à part itemCollection[count]['id'] qui me va récupérer l'id qui est dans Code : Sélectionner tout - Visualiser dans une fenêtre à part var item={..}
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email