11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Parcourir un "sous-tableau"

Bonjour à toutes et à tous,

Voilà j'ai un script qui permet de remplir automatiquement un formulaire en fonction de données envoyées en Json.

Pour ce qui est des inputs et des select ça fonctionne bien par contre pour les checkbox à choix multiples c'est plus compliqué, puisque leurs valeurs sont stockées dans un sous-tableau.

Voilà le code Javascript complet :



<script type="text/javascript">
 
//le tableau principal au format Json, le sous tableau est celui associé à la clé "desert"
var params = {"entree":"orange","principal":"haricots","desert":["tarte","yahourt"]};
 
 
//la boucle de parcour du tableau principale	
for (key in params)
{	
	var balise = $('#'+ key ).get(0).nodeName.toLowerCase();
	//alert(balise);
	if(balise == 'input')
	{
		var input_type = $('#'+ key ).attr('type');
 
		if(input_type == 'text')
		{
			$('#'+ key ).val(params[key]);
		}
		else if(input_type == 'checkbox') //traitement du sous-tableau
		{
                      //ne fonctionne pas, seul le 1er paramètre du sous-tableau est pris en compte...
			$('#'+ key ).val(params[key]);
 
                        //ne fonctionne pas du tout
			for(var i = 0; i < params[key].length; i++)
			{
				$('#'+ params[key][i] ).val(params[key]).attr('checked','checked');
			}
 
		}
	}
	else if(balise == 'select')
	{
		$('#'+ key ).val(params[key]).attr('selected','selected');
	}
}
 
</script>


Comme vous pouvez le voir pour l'instant j'en suis à 2 solutions, une qui prend en compte uniquement la première valeur, est une deuxième qui ne fonctionne pas...

Je pensais à éventuellement extraire le sous-tableau de la boucle principale pour le traiter dans une autre boucle mais je ne vois pas comment faire... ou peut être y a t'il une autre solution ??

Merci beaucoup pour votre aide et bon dimanche !! [/i]
Salut,

N’oublie pas le var dans
for (var key in params)


Sinon oui une seconde boucle peut fonctionner, dans le if de la checkbox :
for (var boxkey in params[key])
	$('#' + boxkey ).val(params[ key][ boxkey]);

Dans ce cas, l'id n'est pas dessert mais sont tarte et yahourt. De toute façon, tu vas avoir un peux de mal à activé 2 checkboxs si plusieurs on le même identifiant…
re,

Bon en fait j'ai trouvé mon problème, il ne venais pas du script JSon que je lui envoi,
en fait le sous-tableau n'était pas encodé car il n'étais pas au bon format (les valeurs n'étais pas associées à des clés...) donc j'ai corrigé tout ça et cette fois ca donne :



<script type="text/javascript">


var params = {"entree":"salade","principal":"tomate","desert"{"tarte":"1","yahourt":"1"},"periode":{"matin":"1","soir":"1"}};
	
for (var key in params)
{	
	var balise = $('#'+ key ).get(0).nodeName.toLowerCase();
	if(balise == 'input')
	{
		var input_type = $('#'+ key ).attr('type');
		
		if(input_type == 'text')
		{
			$('#'+ key ).val(params[key]);
		}
		else if(input_type == 'checkbox')
		{
			for (var keybox in params[key])
			{
				subparams = params[key];
				//alert(keybox);
				var name = subparams[keybox] + '[' + keybox + ']';
				alert(name);
			}
		}
	}
	else if(balise == 'select')
	{
		$('#'+ key ).val(params[key]).attr('selected','selected');
	}
}

</script>



Bon par contre pour être sur de cocher la bonne checkbox je veux la sélectionner par son nom (j’espère que c'est possible j'ai même pas vérifier Smiley sweatdrop ...) et pour ça il faut que je génère le nom, qui est de type "dessert Smiley fruit ", "dessert Smiley tarte " ect... d'où le "var name = subparams Smiley keybox + '[' + keybox + ']';", alors keybox génère bien la valeur du champs, mais avec subparams Smiley keybox j'aimerai récupérer la clé d'origine (dans mon cas "desert", ou "periode")... et ça ne fonctionne pas.

J'ai essayé de m'inspirer du code de jo_link_noir mais sans succès...

Je pense que j'ai pas du coder comme il faut... comment est ce que je pourrais faire pour récupérer cette valeur à ce niveau ??

Merci pour votre aide,
Modifié par Soundboy39 (17 Sep 2012 - 21:17)
Aiie en fait c'est le forum qui à modifié la synthaxe des noms en supprimant des caractères qu'il ne doit pas aimer, d'où les espaces...

Je te met le bout de code correspondant aux checkbox en copie d'écran, comme ça tu verra à quoi cela ressemble.

http://uprapide.com/images/invite/checkbox.png

merci pour ton aide et bonne journée !
Modifié par Soundboy39 (18 Sep 2012 - 07:59)
L'erreur vient des id qui doivent être unique dans la page, c'est le but d'un identifiant en fait.
En mettant des id desert_tarte, desert_yahourt, etc, c'est beaucoup plus simple Smiley cligne
OK mais ma dernière question c'était surtout de savoir comment écrire un "name" (avec l'ID + la "valeur" entre crochet) comme affiché dans l'image avec ma boucle...

Si vraiment ça pose problème je vais voir pour faire autrement...
Sélecteur d'attribut
input[name="desert[ fruit]"]
sans l'espace

Mais tu dois quand même changé le nom de t'es identifiant car dans l'état le code html est invalide.
Pour exemple met la chose importante que tu as oublier: <label> et constate le problème.
Ouep avoir plusieurs id pareil c'est pas bon, et je pense que ça impacte ton script js qui sélectionne à partir des id.

var balise = $('#'+ key ).get(0).nodeName.toLowerCase();


le mieux serait de mettre l'id sur le <li> directement : 
<li id="dessert">


et en suite sélectionner tes input ainsi : 
$('#'+ key + ' input')
re,

Effectivement j'ai revu la philosophie du formulaire de manière à éviter l’utilisation de cette syntaxe, et j'ai attribué un ".id" à chaque checkbox, du coup tout fonctionne bien cette fois.
Modifié par Soundboy39 (21 Sep 2012 - 17:35)
Sujet clos
Aller à