Comment ne récupérer que les balises enfant ?

**souffle56** · 06/09/2010, 17h03

Bonjour,

J'ai un programme (voir ci-dessous) qui me permet de récupérer un fichier xml (via ajax et jQuery), seulement, je n'arrive pas à avoir une réponse suffisamment précise, au niveau de la requête que je fais... A savoir; j'aimerais que seuls les contenus enfants soit affichés ->
* Enfant1
* Enfant2
et pas le reste du contenu "descendant", comme c'est le cas actuellement !
Si j'ai bien compris, la fonction "text()" que j'utilise ramène tout le contenu descendant -> Existe t-il une alternative (autre fonction, par exemple) qui me permette de sélectionner uniquement le texte des balises enfants / à la cible de ma requête jQuery ?

En vous remerciant par avance !

Code XML:

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
<?xml version="1.0" encoding="UTF-8"?>
<enregistrements>
 
	<r>Trucs et astuces
		<r>Parent
			<r titre="Cible">Cible
				<r>Enfant1
					<t>"Texte1"</t>
				</r>
				<r>Enfant2
					<regroupement>Regroupement1
					</regroupement>
				</r>
			</r>
		</r>
		<r>Extra !</r>
	</r>
 
</enregistrements>

Code Html:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parser du XML avec jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
	$('#Menu_apres').click(function(){
		$.ajax({
			type: "GET",
			url: "XML_Essai.xml",
			dataType: "xml",
			complete : function(data, status) {
				var products = data.responseXML;
				var appendHtml = "";
				$(products).find("r[titre='Cible']").children('r').each(function(){
					var enfant = $(this).text();
					appendHtml += '<span>* '+enfant+'<br /></span>';
				}); 
				$("#Menu_suivant").append(appendHtml);
			}});
	});
});
</script>
</head>
<body>
	<div id="container">
		<button class="Click">Récupérer la liste des courses.</button>
		<ul id="Accueil" />
	</div>
</body>
</html>

**danielhagnoul** · 06/09/2010, 21h13

Bonsoir

Code :

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

1
2
3
4
5
6
7
$.get("XML_Essai.xml", function(xml){
	$(xml).find("r[titre='Cible']").children('r').each(function(i, item){
		$(item).children().each(function(j, jtem){
			console.log($(jtem).text());
		});
	});
}, "xml");

**souffle56** · 06/09/2010, 23h58

Merci pour ta proposition;
j'avoue que ce code dépasse mon niveau informatique du moment ! Du fait, je suis quand même arrivé à intégrer le code que tu proposes dans mon code d'origine (avec quelques modifs pour afficher les donnée à l'écran) -> Voilà ce que ça donne :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parser du XML avec jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$.get("XML_Essai.xml", function(xml){
		var appendHtml = "";
		$(xml).find("r[titre='Cible']").children('r').each(function(i, item){
			$(item).children().each(function(j, jtem){
				var enfant = $(jtem).text();
				appendHtml += '<span>* '+enfant+'<br /></span>';
			});
		});
		$("#Accueil").append(appendHtml);
	}, "xml");
 
});
</script>
</head>
<body>
	<div>
		<ul id="Accueil" />
	</div>
</body>
</html>

Du fait, tout irait très bien si ce n'est que, au lieu d'afficher les données enfants de la cible de la requête :
* Enfant1
* Enfant2

L'écran affiche :
* "Texte1"
* Regroupement1

-> Autrement dit, les petits enfant / la cible de la requête ->
- Saurais tu m'aider à adapter le code que tu m'as proposé pour aborder "une génération" au dessus ?

- Eventuellement, pourrais-tu me donner quelque piste (adresse Internet...) qui puisse m'aider à comprendre ta façon de paramétrer les fonctions (i, item...) ?

En te remerciant pour ton soutien !

**danielhagnoul** · 07/09/2010, 00h16

Bonsoir

C'est moi qui ne comprends plus :

"Existe t-il une alternative (autre fonction, par exemple) qui me permette de sélectionner uniquement le texte des balises enfants / à la cible de ma requête jQuery ?"

Pour le niveau supérieur :

Code :

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

1
2
3
4
5
$.get("XML_Essai.xml", function(xml){
	$(xml).find("r[titre='Cible']").children('r').each(function(i, item){
		console.log($(item).text());
	});
}, "xml");

Mais vous l'aviez déjà avec votre code, non ?

La documentation pour $.each() et pour $(xml).each()

**danielhagnoul** · 07/09/2010, 00h25

Je vous conseille de remplacer :

Code :

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

console.log($(item).text());

par

Code :

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

console.log(i, item, $(item).text());

pour mieux voir le niveau atteint. C'est peut-être simplement la valeur de item que vous chercher.

**souffle56** · 07/09/2010, 01h17

Je vous prie de bien vouloir m'excuser; effectivement, j'avais complètement oublié un "remaniement" de dernière minute / à mon code et, du fait, je comprends votre incompréhension !

Sinon, j'ai essayé votre nouveau code, pour le niveau supérieur :

Code :

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

1
2
3
4
5
$.get("XML_Essai.xml", function(xml){
	$(xml).find("r[titre='Cible']").children('r').each(function(i, item){
		console.log($(item).text());
	});
}, "xml");

Grand Merci... seulement, sur la console, à présent, les enfants sont bien affichés... mais avec leurs propres enfants :
Enfant1 "Texte1"
Enfant2 Regroupement1

Sinon, j'ai essayé avec

Code :

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

console.log(i, item, $(item).text());

->voilà les précisions affichées sur la console:
0 <r> Enfant1 "Texte1"
1 <r> Enfant2 Regroupement1

-> N'y aurait-il vraiment pas moyen de n'avoir que les enfants ? :
Enfant1
Enfant2

A ce propos, ne serait-ce pas la fonction "text()" qui, comme je le supposais un peu plus haut, poserait ici un problème; dans le sens où elle prend en compte, non seulement le texte de la balise qu'on lui soumet, mais aussi l'ensemble du texte qui est en descendance (comme précisé ici, dans le 1er exemple) -> Si c'est le cas, comment empêcher cela

Ps: Merci pour les adresses internet proposées !

**SpaceFrog** · 07/09/2010, 09h15

Code :

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

$('#EltdeBase > *')

Ne te retourne que les enfants de premier niveau et n'est pas recursif dans l'arborescence.

**souffle56** · 07/09/2010, 14h12

Bonjour SpaceFrog,
Je viens d'essayer ta proposition -> Voilà ce que ça donne :

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(function(){
$.get("XML_Essai.xml", function(xml){
	$(xml).find("r[titre='Cible'] > *").each(function(i, item){
		console.log($(item).text());
	});
}, "xml");
 
});
</script>

Le hic, c'est que, sur ma console, j'ai toujours les mêmes infos qui s'affichent :
Enfant1 "Texte1"
Enfant2 Regroupement1

-> Es-tu sûr que ça n'est pas la fonction "text()" qui induit tout cela ?
Je dis cela en me référant à cet exemple que j'ai trouvé ici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
  <li>list item 1</li>
  <li>list <strong>item</strong> 2</li>
  </ul>
  </div>
 
The code $('div.demo-container').text() would produce the following result:
 
Demonstration Box list item 1 list item 2

Auquel cas, existe t-il une alternative à la fonction "text()" ? ou un moyen quelconque de "contourner" le problème ?
Pour ma part, je ne vois pas !

**SpaceFrog** · 07/09/2010, 15h59

en bidouillant un peu :

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
 
<script type="text/javascript">
$(function() {
temp=$("#demo-container").clone()
temp.children().remove();
alert(temp.text());
temp.remove();
})
})
</script>
 </head>
<body>
<div id="demo-container">
yyyy
  <div class="demo-box">Demonstration Box</div>
  <ul>
  <li>list item 1</li>
  <li>list <strong>item</strong> 2</li>
  </ul>
  </div>
 
 </body>
</html>

**souffle56** · 07/09/2010, 20h26

Merci SpaceFrog,
J'ai intégré ta proposition dans mon code -> Voilà ce que ça donne :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parser du XML avec jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	temp=$("#demo-container").clone()
	temp.children().remove();
	alert(temp.text());
	temp.remove();
})
</script>
 </head>
<body>
<div id="demo-container">yyyy
 
	<div class="demo-box">Demonstration Box</div>
	<ul>
		<li>list item 1</li>
		<li>list <strong>item</strong> 2</li>
	</ul>
 
</div>
 
 </body>
</html>

-> La boite d'alerte affiche bien "yyyy" sans afficher les enfants; donc, ok jusque là, seulement, ce que je n'arrive pas à comprendre, c'est le sens de la dernière ligne du script :

Code :

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

temp.remove();

En effet, sur ma page html, aucune des balises n'a été retirée
-> Es-tu bien sûr de la syntaxe, quand à l'écriture de cette ligne de code, ou bien est-ce que le problème vient... de mon coté ?

**danielhagnoul** · 07/09/2010, 20h42

Bonsoir

Code :

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

1
2
3
4
5
6
7
8
/*
 * Le problème est provoqué par la structure non standard du XML
 */
$.get("XML-1.xml", function(xml){
	$(xml).find("r[titre='Cible']").children("r").each(function(i, item){
		console.log($.trim(item.childNodes[0].textContent));
	});
}, "xml");

**souffle56** · 07/09/2010, 21h27

Ouff, grand Merci à toi, danielhagnoul,

J'ai essayé ton code et... Ca marche très très bien ! Vraiment super !

Je croyais que jQuery était "suffisant" en soi pour travailler sur une arborescence XML, sans me douter qu'il avait ses "limites" dans ce domaine, et qu'un p'tit peu de javascript pourrait l'aider à les dépasser !
Même si ça n'est pas le sujet du moment, ça me démontre aussi que, non seulement javascript et jQuery sont "saisissants" en soi, quand aux capacités qui leur sont propres, mais que, dans la pratique, ils sont vraiment faits pour travailler ensemble !

Me reste plus qu'à ajuster ta proposition de code à mon code de travail du moment (mélange de xml / xsl, js et jQuery...) et voir ce que ça donne !

Ps: Ta suggestion, en plus, si j'ai bien compris, peut me permettre de travailler sur un fichier xml sans utiliser forcément Ajax -> Est-ce à dire qu'elle serait plus "avantageuse" (gain en rapidité d'exécution...) ? ou bien est-ce que ces 2 approches se valent, dans le concret ?

**SpaceFrog** · 07/09/2010, 21h45

Oui Daniel travaille sur les objets existants, il recupère tout le contenu et en retire le contenu des enfants.
Dans ma version je travaille sur un clone (temp)
j'en retire les enfant, il ne reste donc que le contenu texte direct à l'exclusion des enfants.
le remove est juste là pour effacer le clone après utilisation...

**danielhagnoul** · 07/09/2010, 21h50

Bonsoir

jQuery ce n'est rien d'autre que du JavaScript. Ce n'est pas parce que l'on utilise jQuery que l'on doit oublier les bases du JavaScript, même si j'ai ce problème également.

C'est la structure de votre fichier XML qui est étrange, l'usage d'une balise (r) à tout faire est bizarre. Si "Enfant1" et "Enfant2" étaient inclus, comme il se doit dans une balise, exemple <fils>Enfant1</fils>, alors accès par children("fils").

Je n'ai pas une grande expérience dans la manipulation du XML, mais il me semble que l'utilisation d'une transaction AJAX est incontournable.

**souffle56** · 07/09/2010, 22h48

Re-Bonsoir,

jQuery ce n'est rien d'autre que du JavaScript. Ce n'est pas parce que l'on utilise jQuery que l'on doit oublier les bases du JavaScript, même si j'ai ce problème également.

C'est vrai que je suis un vrai néophyte, coté javascript, et en même temps, j'apprécie beaucoup chaque occasion qui m'est donné de "me faire la main" dans ce registre également ! Par contre, en ce qui vous concerne, vu la pertinence du code que vous m'avez proposé, ça ne me donne pas du tout l'impression que vous n'abordez que "les bases" du javascript... Mais bon, chacun son niveau -> chacun son point de vue !

Sinon, quand vous mettez :

C'est la structure de votre fichier XML qui est étrange, l'usage d'une balise (r) à tout faire est bizarre. Si "Enfant1" et "Enfant2" étaient inclus, comme il se doit dans une balise, exemple <fils>Enfant1</fils>, alors accès par children("fils").

Je comprends votre étonnement... Mon approche n'est pas "classique", effectivement ! Peut-être parce que je ne suis pas "classique" (humour !) ou bien, plus prosaïquement, en fait j'utilise la balise <r> comme niveau d'arborescence d'un menu de structure xml -> Ca me permet de simplifier l'écriture de ce menu (titres, sous-titres... jusqu'à éventuellement une dizaine de niveaux) du fait que c'est plus facile à écrire <r> que <fils>, petit-fils>, <petit-petit-fils>... et puis, ça m'évite de me tromper de niveau, à l'écriture !

Je n'ai pas une grande expérience dans la manipulation du XML, mais il me semble que l'utilisation d'une transaction AJAX est incontournable.

Certainement, dans le cas de certaines applications plus complexes notamment (avec gestion des erreurs...), comme c'est évoqué ici (je viens de découvrir), mais selon ce qu'ils disent, il me semble que le "$.get()" peut être largement suffisant, en ce qui me concerne, du fait du peu de complexité de mon code... et du fait que la fonction "$.get()" étant moins complexe que ".ajax()", elle est peut-être plus rapide, non

Sinon, Merci, SpaceFrog, pour vos compléments d'explication... Du fait, peut-être en viendrai-je à combiner votre approche (travail en "virtuel" sur un groupe de balises) avec les propositions de danielhagnoul; pour aboutir à concrétiser mon projet du moment !

Ps : Je fais quelques petits test, avant de revenir ici "valider" ce topic... A bientôt !

**danielhagnoul** · 07/09/2010, 22h56

Bonsoir

Beaucoup de gens utilisent ajax() à tord, même jQuery recommande l'usage des méthodes plus sécurisées, comme get() http://api.jquery.com/category/ajax/,

The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available and are easier to use. If less common options are required, though, $.ajax() can be used more flexibly.

**souffle56** · 08/09/2010, 21h49

Merci à vous pour les précisions; ca me confirme que ajax() n'a pas que des avantages...
Sinon, il me reste un petit détail à régler, concernant le code que j'utilise... Je ne l'ai pas abordé auparavant; pour simplifier les données; mais bon, voilà, c'est à propos du code que vous m'avez proposé :

Code :

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

1
2
3
4
5
$.get("XML-1.xml", function(xml){
	$(xml).find("r[titre='Cible']").children("r").each(function(i, item){
		console.log($.trim(item.childNodes[0].textContent));
	});
}, "xml");

Si je modifie un peu mon xml pour donner ceci (ce qui me ramène aux conditions réelles de mon projet) :

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
<?xml version="1.0" encoding="UTF-8"?>
<enregistrements>
 
	<r>Trucs et astuces
		<r>Parent
			<r>Cible
				<r>Enfant1
					<t>"Texte1"</t>
				</r>
				<r>Enfant2
					<regroupement>Regroupement1
						<t>Autre niveau !</t>
					</regroupement>
					<r>Enfant3
						<regroupement>Regroupement1
							<t>Autre niveau !</t>
						</regroupement>
					</r>
				</r>
				<r>Enfant4
					<regroupement>Regroupement1
						<t>Autre niveau !</t>
					</regroupement>
				</r>
			</r>
		</r>
		<r>Extra !</r>
	</r>
 
</enregistrements>

Autrement dit, si je remplace "<r titre="Cible">Cible" par "<r>Cible" -> Y a t-il toujours moyen d'accéder à cette balise, via jQuery ?
J'ai essayé une formule du genre :

Code :

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

$(xml).find("r:text()='Cible'").children("r")

mais bon, il ne prend pas... et je ne sais pas où chercher pour trouver une réponse à cela !

-> Quelqu'un aurait une idée

Comment ne récupérer que les balises enfant ?

jQuery

Discussions similaires

Partager

Partager