Afficher du XML dans une table HTML avec fonction récursive (ou pas)

**iviewclear** · 14/04/2010, 14h09

Bonjour à tous,
je m'adresse à vous pour un "souci" simple.
Mais comme je commence la programmation je me prends la tête depuis deux jours dessus malgré toute la littérature que j'ai pu trouvé
sur comment parser un XML dans du HTML à l'aide de Javascript et du DOM.

Voila mon fichier XML : sa structure est correcte d'après mon éditeur XML et d'après ce que je peux en voir.

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
<?xml version="1.0" encoding="UTF-8"?>
 
<!-- New document created with EditiX at Tue Apr 13 15:23:37 CEST 2010 -->
 
 
<reseau id_reseau="123" lib_res="RESEAU 1" lib_aff="AVENIR" datedepart="17/03/2010" faces="135" pdv="8" pdvmu="0" facesmu="0" facesgf="135" vitri="0" colle="135" cons="7" couleur_marqueur="red" >
	<commune id_commune="11111" lib_com="AAAAA" faces="3" pop_comm="5684" pourc="5%" km_comm="10">
		<iris id_iris="aaa" nom_iris="IRISAAA" faces_iris="2" pop_iris="10000" km_iris="12" >
			<magasin id_mag="123" adresse_mag="123 rue de la gare">
				<panneau id_panneau="678910">
					<adr1>RUE DE LA GARE</adr1>
					<adr2>ANGLE RIE</adr2>
					<km>13.4</km>
					<format>400X300</format>
					<ecl>NON</ecl>
					<tri>NON</tri>
					<lat>45.56</lat>
					<lng>5.56</lng>
				</panneau>
				<panneau id_panneau="345678">
					<adr1>RUE DE LA</adr1>
					<adr2>RURRUR</adr2>
					<km>13.4</km>
					<format>400X300</format>
					<ecl>NON</ecl>
					<tri>NON</tri>
					<lat>45</lat>
					<lng>78</lng>
				</panneau>			
			</magasin>
		</iris>
		<iris id_iris="bbb" nom_iris="IRISBBB" faces_iris="1" pop_iris="10000" km_iris="19" >
			<magasin>
				<panneau id_panneau="678911">
					<adr1>RUE DE LA GARE</adr1>
					<adr2>ANGLE RIE</adr2>
					<km>13.4</km>
					<format>400X300</format>
					<ecl>NON</ecl>
					<tri>NON</tri>
					<lat>45.56</lat>
					<lng>5.56</lng>
				</panneau>				
			</magasin>
		</iris>
	</commune>	
	<commune id_commune="33333" lib_com="CCCCC"  faces="1" pop_comm="5684" pourc="8%" km_comm="10">
		<iris id_iris="ccc" nom_iris="IRISCCC" faces_iris="1" pop_iris="10000" km_iris="12" >
			<magasin id_mag="123" adresse_mag="123 rue de la gare">
				<panneau id_panneau="565412">			
					<adr1>RUE</adr1>
					<adr2>RURURURURUR</adr2>
					<km>13.4</km>
					<format>400X300</format>
					<ecl>NON</ecl>
					<tri>NON</tri>
					<lat>12</lat>
					<lng>48</lng>
				</panneau>
			</magasin>
		</iris>	
	</commune>
 
</reseau>

La structure de mon XML est hiérarchique : elle doit normalement favorisé la création du HTML. (enfin c'est ce que je croyais....)
Voila ma problématique : je veux que les données XML aillent dans un tableau HTML en fonction de certaines règles
Explications :
1 Pour une balise <commune>, je souhaite créer un TR avec autant de TD que d'attributs contenus dans ma balise
Ainsi je souhaite afficher les valeurs de ceux-là : lib_com="AAAAA" faces="3" pop_comm="5684" pourc="5%" km_comm="10"
2 Puis pour la balise <iris>, un autre TR avec autant de TD que d'attibuts soit ceux-là :nom_iris="IRISAAA" faces_iris="2" pop_iris="10000" km_iris="12"
3 Puis pour la balise <magasin>, un autre TR avec autant 1 TD contenant mon attribut adresse_mag="123 rue de la gare",
4 Puis pour la balise <panneau>, autant de TR que de balise panneau rencontrée dans la balise <iris> et je souhaiterai qu'un TD contienne les valeurs de
adr1 et adr2 concaténées et n autre TD la valeur de la balise <km>

Si pour une même commune, il y a plusieurs iris, on recommence le point 2.
Si je rencontre une autre commune, je recommence le parsage à partir du point 1.

J'ai réussi à faire quelques affichages de mes données XML avec en plus un résultat approximatif sur les 3 navigateurs du marché (IE, Chrome et Firefox)
IE étant celui qui m'affiche des résultats (pour une fois...)

Quelqu'un pourrait-il m'aider à mettre au point une fonction javascript "récursive" qui écrive le résultat dans un div prévu à cet effet ?
Je ne sais pas si j'en demande trop.
J'utilise uniquement le DOM et javascript. Je ne souhaite pas travailler en PHP malgré les facilités offertes par ce langage pour du XML.

Et dans le meilleur des cas, je souhaiterai que cela fonctionne sur les 3 navigateurs cités avec en plus les soucis d'interprétation que j'ai pu découvrir, notamment les lignes à vide.

Je vous remercie d'avance.

PS : j'utilise ce code-là pour charger mon 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
 
<script type="text/javascript">
 
	var xmlDoc;
	if (window.ActiveXObject){
	// code for IE
	xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	}else if (document.implementation.createDocument){
	// code for Firefox, Mozilla, Opera, etc.
	xmlDoc=document.implementation.createDocument("","",null);
	} else {
	  alert('Your browser cannot handle this script');
	}
 
	xmlDoc.async=false;
	xmlDoc.load("ryls116Cv2.xml");	
 
</script>

**BaBeuH** · 14/04/2010, 18h59

Salut,

Hmmm, tu as peut-être des contraintes techniques, mais pour ce que tu souhaites faire, l'idéal semble de faire une transformation XSL sur ton XML pour obtenir ton HTML.

Si tu ne connais pas les transformations XSL :
http://xml.developpez.com/cours/?page=tech#tech_xslt

A+

**iviewclear** · 19/04/2010, 10h06

Envoyé par BaBeuH

Salut,

Hmmm, tu as peut-être des contraintes techniques, mais pour ce que tu souhaites faire, l'idéal semble de faire une transformation XSL sur ton XML pour obtenir ton HTML.

Si tu ne connais pas les transformations XSL :
http://xml.developpez.com/cours/?page=tech#tech_xslt

A+

Merci pour ta réponse bien que je voulais par cet exercice maitriser un "peu" javascript + le dom xml afin pourquoi pas de me lancer ensuite dans le xsl
Je voulais procéder par étape car je suis très jeune développeur

**iviewclear** · 19/04/2010, 13h17

Bon je reviens en espèrant que quelqu'un puisse m'aider cette fois
J'ai un peu changé mon xml
il est ci-dessous :

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
 
<?xml version="1.0" encoding="UTF-8"?>
 
<reseau>
<id_reseau>123</id_reseau>
<lib_res>RESEAU 1</lib_res>
<lib_aff>AVENIR</lib_aff>
<datedepart>17/03/2010</datedepart>
<faces>135</faces>
<pdv>8</pdv>
<pdvmu>0</pdvmu >
<facesmu>0</facesmu >
<facesgf>135</facesgf >
<vitri>0</vitri >
<colle>135</colle >
<cons>7</cons>
<couleur_marqueur>red</couleur_marqueur >
	<liste_communes>
		<commune> 
		<id_commune>11111</id_commune>
		<lib_com>AAAAA</lib_com>		
		<pop_comm>5684</pop_comm>
		<pourc>5%</pourc>
		<km_comm>10</km_comm>
			<liste_iris>
				<iris>
				<id_iris>aaa</id_iris>
				<lib_iris>IRISAAA</lib_iris>
				<faces_iris>10</faces_iris>
				<pop_iris>10000</pop_iris>
				<km_iris>12</km_iris>	
						<magasin>
						<id_mag>MAG1</id_mag>
						<adr_mag>12 RUE DE LA POUPEE</adr_mag>
							<liste_px>
								<panneau>
								<id_panneau>678910</id_panneau>
								<adr1>RUE DE LA republique</adr1>
								<adr2>ANGLE RIE</adr2>
								<km>13.4</km>
								<format>400X300</format>
								<ecl>NON</ecl>
								<tri>NON</tri>
								<lat>45.56</lat>
								<lng>5.56</lng>
								</panneau>
								<panneau>
								<id_panneau>3456789</id_panneau>
								<adr1>RUE DE LA GARE a cote de la rie </adr1>
								<adr2>RURURUR</adr2>
								<km>13.4</km>
								<format>400X300</format>
								<ecl>NON</ecl>
								<tri>NON</tri>
								<lat>45.56</lat>
								<lng>5.56</lng>
								</panneau>
							</liste_px>							
						</magasin>			
				</iris>
				<iris>
				<id_iris>bbb</id_iris>
				<lib_iris>IRISBBB</lib_iris>
				<faces_iris></faces_iris>
				<pop_iris>10000</pop_iris>
				<km_iris>12</km_iris>	
					<magasin>
					<id_mag>MAG1</id_mag>
					<adr_mag>12 RUE DE LA POUPEE</adr_mag>
						<liste_px>
							<panneau>
							<id_panneau>678910</id_panneau>
							<adr1>RUE Du bidule</adr1>
							<adr2>ANGLE RIE</adr2>
							<km>13.4</km>
							<format>400X300</format>
							<ecl>NON</ecl>
							<tri>NON</tri>
							<lat>45.56</lat>
							<lng>5.56</lng>
							</panneau>											
						</liste_px>							
					</magasin>			
				</iris>			
			</liste_iris>
		</commune>
		<commune> 
		<id_commune>22222</id_commune>
		<lib_com>BBBBB</lib_com>		
		<pop_comm>12000</pop_comm>
		<pourc>3%</pourc>
		<km_comm>8</km_comm>
			<liste_iris>
				<iris>
				<id_iris>CCC</id_iris>
				<lib_iris>IRISCCC</lib_iris>
				<faces_iris>5</faces_iris>
				<pop_iris>10000</pop_iris>
				<km_iris>12</km_iris>	
						<magasin>
						<id_mag>MAG1</id_mag>
						<adr_mag>12 RUE DE LA POUPEE</adr_mag>
							<liste_px>
								<panneau>
								<id_panneau>678910DEFR</id_panneau>
								<adr1>RUE DE LA MAIRIE</adr1>
								<adr2></adr2>
								<km>13.4</km>
								<format>553X217</format>
								<ecl>NON</ecl>
								<tri>NON</tri>
								<lat>45.56</lat>
								<lng>5.56</lng>
								</panneau>
								<panneau>
								<id_panneau>34567894567</id_panneau>
								<adr1>RUE DE VICHY</adr1>
								<adr2>RURURUR</adr2>
								<km>13.4</km>
								<format>400X300</format>
								<ecl>NON</ecl>
								<tri>NON</tri>
								<lat>45.56</lat>
								<lng>5.56</lng>
								</panneau>
							</liste_px>							
						</magasin>			
				</iris>
				<iris>
				<id_iris>DDD</id_iris>
				<lib_iris>IRISDDD</lib_iris>
				<faces_iris></faces_iris>
				<pop_iris>10000</pop_iris>
				<km_iris>7</km_iris>	
					<magasin>
					<id_mag>MAG1</id_mag>
					<adr_mag>12 RUE DE LA POUPEE QUI TPOUSSE FORT</adr_mag>
						<liste_px>
							<panneau>
							<id_panneau>678910</id_panneau>
							<adr1>RUE DU TRUC</adr1>
							<adr2>ANGLE RUE DU MANCHE</adr2>
							<km>13.4</km>
							<format>400X300</format>
							<ecl>NON</ecl>
							<tri>NON</tri>
							<lat>45.56</lat>
							<lng>5.56</lng>
							</panneau>											
						</liste_px>							
					</magasin>			
				</iris>			
			</liste_iris>
		</commune>
	</liste_communes>		
</reseau>

Ma question est simple

J'aimerai afficher au moins uns sous-balise de chacune de mes balises parcourues

Pour une balise comme <reseau> ca va je m'en sors parce que il n'y en a qu'une seule

Mais pour une balise comme <panneau> je n'arrive pas à boucler dessus
Je ne sais pas par quoi commencer malgré tout ce que j'ai pu lire
je suis persuadé que cela est hyper simple mais je bloque (

j'ai presque honte de demander à nouveau...)
Sur quoi doit porter mon for pour que j'affiche ensuite toutes les sous-balises de la balise <panneau> ?

Pour boucler sur les sous-balises, j'utilise ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
x = xmlDoc.getElementsByTagName("reseau")[0].childNodes;
		y = xmlDoc.getElementsByTagName("reseau")[0].firstChild;
 
		for (i=0; i<x.length; i++){
			if (y.nodeType==1){//Process only element nodes (type 1)			  
			  document.write(y.nodeName  + " : -- " + x[i].childNodes[0].nodeValue + "<br />");
			}
			y=y.nextSibling;
		}

Merci de votre aide parce que là je commence à m'énerver (oui je sais je ne devrais pas...)

**hakurou** · 19/04/2010, 13h51

Je te remets le code que j'avais fait

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
 
var file = "file.xml";
// methode perso pour ouvrir un xml
// tu changes cette ligne par ton code de recuperation du document XML
$.readXML(file, function(data){
 
    var result = "";
 	result = read(null, data, 0, result);
	document.write(result);
 
	function read(parent, file, spaces, result)
	{
		var xml = null;
		if(parent == null)
			xml = file;
		else
			xml = parent;
 
		var children = xml.childNodes;
		for(child in children)
		{
			var e = children[child];
			if(e.nodeType == 1)
			{
				if(e.children.length > 0)
				{
					var nspaces = "";
					for(var i = 0; i < spaces; i++)
						nspaces += "&nbsp;&nbsp;&nbsp;";
 
					result += "<br/>" + nspaces + "- " + e.nodeName + ": ";
					result = read(e, null, spaces + 1, result);
				}
				else
				{
					var nspaces = "";
					for(var i = 0; i < spaces; i++)
						nspaces += "&nbsp;&nbsp;&nbsp;&nbsp;";
					// verifier que le noeud n'est pas vide	
					var text = e.firstChild != null ? e.firstChild.nodeValue: "";
					result += "<br/>" + nspaces + e.nodeName + ": " + text;
				}
			}
		}
 
		return result;
	}
});

Ca 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
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
 
- reseau:
    id_reseau: 123
    lib_res: RESEAU 1
    lib_aff: AVENIR
    datedepart: 17/03/2010
    faces: 135
    pdv: 8
    pdvmu: 0
    facesmu: 0
    facesgf: 135
    vitri: 0
    colle: 135
    cons: 7
    couleur_marqueur: red
   - liste_communes:
      - commune:
            id_commune: 11111
            lib_com: AAAAA
            pop_comm: 5684
            pourc: 5%
            km_comm: 10
         - liste_iris:
            - iris:
                    id_iris: aaa
                    lib_iris: IRISAAA
                    faces_iris: 10
                    pop_iris: 10000
                    km_iris: 12
               - magasin:
                        id_mag: MAG1
                        adr_mag: 12 RUE DE LA POUPEE
                  - liste_px:
                     - panneau:
                                id_panneau: 678910
                                adr1: RUE DE LA republique
                                adr2: ANGLE RIE
                                km: 13.4
                                format: 400X300
                                ecl: NON
                                tri: NON
                                lat: 45.56
                                lng: 5.56
                     - panneau:
                                id_panneau: 3456789
                                adr1: RUE DE LA GARE a cote de la rie
                                adr2: RURURUR
                                km: 13.4
                                format: 400X300
                                ecl: NON
                                tri: NON
                                lat: 45.56
                                lng: 5.56
            - iris:
                    id_iris: bbb
                    lib_iris: IRISBBB
                    faces_iris:
                    pop_iris: 10000
                    km_iris: 12
               - magasin:
                        id_mag: MAG1
                        adr_mag: 12 RUE DE LA POUPEE
                  - liste_px:
                     - panneau:
                                id_panneau: 678910
                                adr1: RUE Du bidule
                                adr2: ANGLE RIE
                                km: 13.4
                                format: 400X300
                                ecl: NON
                                tri: NON
                                lat: 45.56
                                lng: 5.56
      - commune:
            id_commune: 22222
            lib_com: BBBBB
            pop_comm: 12000
            pourc: 3%
            km_comm: 8
         - liste_iris:
            - iris:
                    id_iris: CCC
                    lib_iris: IRISCCC
                    faces_iris: 5
                    pop_iris: 10000
                    km_iris: 12
               - magasin:
                        id_mag: MAG1
                        adr_mag: 12 RUE DE LA POUPEE
                  - liste_px:
                     - panneau:
                                id_panneau: 678910DEFR
                                adr1: RUE DE LA MAIRIE
                                adr2:
                                km: 13.4
                                format: 553X217
                                ecl: NON
                                tri: NON
                                lat: 45.56
                                lng: 5.56
                     - panneau:
                                id_panneau: 34567894567
                                adr1: RUE DE VICHY
                                adr2: RURURUR
                                km: 13.4
                                format: 400X300
                                ecl: NON
                                tri: NON
                                lat: 45.56
                                lng: 5.56
            - iris:
                    id_iris: DDD
                    lib_iris: IRISDDD
                    faces_iris:
                    pop_iris: 10000
                    km_iris: 7
               - magasin:
                        id_mag: MAG1
                        adr_mag: 12 RUE DE LA POUPEE QUI TPOUSSE FORT
                  - liste_px:
                     - panneau:
                                id_panneau: 678910
                                adr1: RUE DU TRUC
                                adr2: ANGLE RUE DU MANCHE
                                km: 13.4
                                format: 400X300
                                ecl: NON
                                tri: NON
                                lat: 45.56
                                lng: 5.56

as tu étudié le code pour parvenir a quelque chose ou pas?

**iviewclear** · 19/04/2010, 14h13

as tu étudié le code pour parvenir a quelque chose ou pas?

Merci de ta rapidité
Oui je l'ai étudié mais je suis resté bloquer sur le début de ta fonction de récupération de data xml
Si je comprends bien, je dois exclure toute cette partie :

Code :

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

1
2
3
4
5
6
7
8
var file = "file.xml";
// methode perso pour ouvrir un xml
// tu changes cette ligne par ton code de recuperation du document XML
$.readXML(file, function(data){
 
    var result = "";
 	result = read(null, data, 0, result);
	document.write(result);

pour la remplacer par la mienne ? Ou uniquement var file = "file.xml"; ?

Moi j'utilise quelque chose comme ça :

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
<script type="text/javascript">     
 
			function loadXMLDoc(dname){
				if (window.XMLHttpRequest)
				  {
				  xhttp=new XMLHttpRequest();
				  }
				else{
				  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
				  }
				xhttp.open("GET",dname,false);
				xhttp.send("");
				return xhttp.responseXML;
			}	
     </script>

Donc je dois passer le paramètre dname à result = read(null, data, 0, result); en remplaçant data par dname ?

D'avance merci

Afficher du XML dans une table HTML avec fonction récursive (ou pas)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager