syntaxe avec le tableau associatif

Version imprimable

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:

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.

02/05/2011, 17h49
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.
02/05/2011, 18h35
SpaceFrog

en l'occurrence un dirait plutot un json

=> boucle for(elt in jsonObj)
02/05/2011, 22h51
n3x1n²

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:

itemCollection[count]['id']

??? :(
03/05/2011, 10h09
n3x1n²

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

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 :aie:

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:

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...

03/05/2011, 10h50
n3x1n²

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:

itemCollection[count]['id']

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

Code:

var item={..}
03/05/2011, 11h55
Loceka
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:

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:

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à. :aie:

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

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

@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:

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

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:

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