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

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

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

syntaxe avec le tableau associatif

JavaScript

Discussions similaires

Partager

Partager