Récupération des données+nom balises d'un XML pour affichage

Bonjour à tous,

Je débute en Javascript et j'ai pondu un petit script qui fais exactement ce que je veux, à savoir récupérer le texte contenu dans certaines balises d'un XML (que je génère via une requête AJAX), le seul hic : j'aimerais que ça devienne un peu plus dynamique. Je m'explique :

J'ai un input Nom qui déclenche une auto suggestion, si je commence à taper "alsa", un fichier xml de ce type est généré :

<ajax-response>
  <response id="_updater" type="object">
    <matches>
      <entry>
        <Nom>alsacrea site</Nom>
        <Prenom>site</Prenom>
        <Adresse>forum</Adresse>
        <Codepostale>javascript</Codepostale>
        <Ville class="obligatoire">paris</Ville>
        <Telephone>0178457845</Telephone>
        <Email>inconnu</Email>
      </entry>
       <entry>
        <Nom>alsacreation site</Nom>
        <Prenom>site</Prenom>
        <Adresse>inconnu</Adresse>
        <Codepostale>idem</Codepostale>
        <Ville class="obligatoire">ici</Ville>
        <Telephone>014578451245</Telephone>
        <Email>topsecret</Email>
      </entry>
    </matches>
  </response>
</ajax-response>

L'idée c'est qu'une fois un nom choisis via l'auto suggestion, mes autres input (prénom, adresse etc...) s'auto-completent, donc en parallèle il faut récupérer les données de ce .xml.
Pour récupérer par exemple la valeurs des prénoms je fais ça :

var i_prenom=0;
var tableau_prenom = new Array();

$(xmlDoc).find('Prenom').each(function() { 
	i_prenom = i_prenom+1;
	tableau_prenom[i_prenom] = $(this).text();
//on affiche dans l'input du prénom le text correspodant au moment d'un clic sur une div
	$('#div_affichage_des_autres_input').click(function() { 
		$('#input_prenom').val(tableau_prenom[elements]);
                //je précise que la variable elements retourne le numéro de la ligne que j'ai cliqué dans l'auto suggestion, donc si je prends la ligne 2, elements=2 donc j'aurais bien le prenom numéro 2 de l'xml correspondant
	});
});

En résumé tout ça marche très bien mais je me retrouve avec un code très long car autant de script que d'input (prénom, adresse, ville etc)

Et surtout gros soucis si le xml me renvoi un input que je n'ai pas pris en considération : age par exemple !

Je cherche donc à analyser mon .xml et à générer à chaque balise trouvé un input.
Exemple : il cherche dans entry les balises, si il trouve une balise il prend son nom ==> Prénom, il crée un input "id=input_prenom" etc

De cette façon je pourrait analyser tout type de .xml, et surtout gagner en ligne de code !

J'ai testé un $(xmlDoc).find('entry').children.each(function() mais ça me retourne tous les champs.

D'avance merci pour votre aide j'en ai bien besoin

salut...

tu débutes donc il est peut être encore temps de travailler sur de bonnes bases....

L'idéal en JS est de travailler avec du JSON, beaucoup plus malléable et plus simple d'utilisation...

Comment renvoi tu l'xml ??? c'est un php que tu appelle en ajax et qui renvoi les données formatée en xml ?

Si oui.. php sait ressortir un JSON...

Renseigne toi sur le JSON il y a plusieurs threads qui en parlent ici et même des tutos...

A mon avis ça te simplifiera la vie... et ça fera la même chose

Le xml m'est envoyé par une methode (langage 4D), je n'ai pas d'autre choix que d'utiliser un XML qui aura cette tête là

Requete Ajax :

$.ajax({
	type: 'GET',
	url: '/4DACTION/Auto_Suggestion',
       data: 'Regie=2&Nom=utilisateurextra&Password=motdepasse&table=45&champ=Nom&Valeur='+entreenom+',
		dataType: 'xml',

En fonction du nom tapé dans mon input nom, la requete se lance en ajoutant la variable "entreenom" dans les parametres, les autres parametres sont justes des acces et les coordonnées de la table que je requete.
Modifié par lele91 (12 Jul 2012 - 13:08)

Bonjour,

pchlj a écrit :
Renseigne toi sur le JSON il y a plusieurs threads qui en parlent ici et même des tutos...

A mon avis ça te simplifiera la vie... et ça fera la même chose

Cela fera la même chose, c'est-à-dire que cela ne règlera pas du tout le problème d'origine...

Une piste avec :

var i=0;
var tableau_entry = new Array(); 
			
	$(xmlDoc).find('entry').children().each(function() {
		entry_i = entry_i+1;
		tableau_entry[entry_i] = this.nodeName;
valuee = this.nodeName;

      var tr_entry = $('<input style="height:18px;"id="'+entry_i+'"value="'+ valuee+'"/>').appendTo('#div_droite'); 

 
		});

mes inputs sont crées mais si mon XML contient 2 résultats, j'aurais alors 2 inputs nom, 2 inputs prénoms etc, ça avance
Modifié par lele91 (12 Jul 2012 - 16:12)

Pourquoi fais-tu un each et ne prends-tu pas directement l'élément "entry" correct ?

Julien Royer a écrit :
Pourquoi fais-tu un each et ne prends-tu pas directement l'élément "entry" correct ?

Hum je sais pas trop, tu ferais comment toi, j'ai testé sans .each et je n'arrive a rien afficher du tout. Il faut bien lui dire de chercher dans les enfants de entry et que pour chaque enfant trouvé il doit faire blablabla ?

Ha il faudrait faire le each que sur le premier entry trouvé, c'est ce que tu veux dire ?
Modifié par lele91 (12 Jul 2012 - 16:28)

Petit avancement, j'ai réussi maintenant a récupérer qu'une fois les balises, et à générer des input en conséquent :

var entry_i=0;
var tableau_entry = new Array(); 
var valuee;
			
$(xmlDoc).find('entry:first').children().each(function() { //je savais bien qu'il fallait firt ^^
		
	entry_i = entry_i+1;
	tableau_entry[entry_i] = this.nodeName;
	valuee = this.nodeName;
  
       var tr_entry = $('<p style="margin:5px;height:18px;">'+valuee+' :<input style="height:18px;"id="'+entry_i+'" value="'+valuee+'"/></p><br />').appendTo('#div_droite'); 
		$('#div_droite').css({'visibility' : 'visible'});

});

Prochaine étape : pour chaque children trouvé, stocker les résultats (leur valeur) dans un tableau, donc autant de tableaux que d'enfants trouvés (et que d'inputs, vous suivez toujours ?). Par contre là il faut passer dans tous les entry


Il faut variabiliser ce bout de code je pense (vu qu'il marche avec le nom des balises en "dur"), exemple pour la balise "Prenom" :

	$(xmlDoc).find('Prenom').each(function() { 
			i_prenom = i_prenom+1;
			tableau_prenom[i_prenom] = $(this).text();

		$('#div_afficher_input').click(function() {   $('#input_généré_par_le_code_precedent').val(tableau_prenom[elements]);
		});
	});	

//par défault les input sont vide et c'est suite au clic sur la div_afficher_input qu'ils se remplissent, donc tous les nom, prénoms etc doivent etre stocké dans un tableau respectif

Modifié par lele91 (13 Jul 2012 - 11:09)

Encore du nouveau !!

		var entry_i=0;
		var tableau_entry = new Array(); 
		var valuee;
			
		$(xmlDoc).find('entry:first').children().each(function() {
		
			entry_i = entry_i+1;
			tableau_entry[entry_i] = this.nodeName;
			valuee = this.nodeName;
	
  
		var tr_entry = $('<p style="margin:5px;height:18px;">'+valuee+' :<input style="height:18px;"id="'+entry_i+'" value="'+valuee+'"/></p><br />').appendTo('#div_droite'); 
		$('#div_droite').css({'visibility' : 'visible'});
		
		
			var valueee=0;
			var tableau_valueee = new Array(); 
					$(xmlDoc).find(''+valuee+'').each(function() {
					var valueee = valueee+1;
					tableau_valueee[valueee] = $(this).text();
					$('#'+entry_i).val(tableau_valueee[valueee]);
					});
					
 
 
  
		});

Les champs sont chargés, seul hic ils prennent la valeur du dernier enfant trouvé (logique), j'aimerais que par default ils prennent la valeur des enfants du premier entry trouvé, j'ai essayé un $('#'+entry_i).val(tableau_valueee[1]); mais sans succes

Je sais ce qu'il faut faire et ce dont j'ai besoin mais je n'arrive pas à le faire
Il faut que pour chaque balise trouvé, ça crée un tableau qui stock des valeurs.

Processus :

Exemple avec le XML suivant :

<entry>
     <Nom>Jean</Nom>
     <Prenom>Maurice</Prenom>
</entry>
<entry>
     <Nom>Luc</Nom>
     <Prenom>Jack</Prenom>       
</entry>

Etape 1 :

On cherche dans le premier entry tous les enfants : (ça ça marche )

On trouve un enfant Nom, on crée sont input avec id="input_0"
On trouve un enfant Prenom on crée son input avec id="input_1" .

Etape 2 :

On prends chaque balise trouvé et on cherche leurs valeurs pour les stocker dans un tableau.

.find('Nom')
On trouve Nom = Jean on stock dans tableau_0[0]
On trouve Nom = Luc on stock dans tableau_0[1]


.find('Prenom')
On trouve Prenom = Maurice on stock dans tableau_1[0]
On trouve Prenom = Jack on stock dans tableau_1[1]

Du coup il est ensuite facile de dire je veux afficher dans l'input Nom et Prenom la deuxieme personne trouvé dans le .xml :

input_0 (celui du Nom), il faut lui attribuer tableau_0[1]
//où tableau_0 est le tableau des Nom et [1] et le deuxieme enregistrement
input_1 (celui du Prenom), il faut lui attribuer tableau_1[1]
//où tableau_1 est le tableau des Prenom et [1] et le deuxieme enregistrement


Cette logique vous semble bonne ? Ca vous parait faisable ?
Modifié par lele91 (13 Jul 2012 - 16:04)