Aide pour lire du xml

Version imprimable

bonjour voila je chercher à :

1.accéder à un fichier xml
2.lire un fichier xml
3.récupérer les résultats et les mettre sous forme de tableau
4.exploiter ses données par la suite.

le tout en ajax, jquerry, chose que je n'ai jamais faite avant. Donc je suis aller sur la doc en ligne et j'ai essayé d'adapter avec mon xml mais hélas rien ne s'affiche et je ne sais pas pourquoi...

voici mon xml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?xml version="1.0" encoding="utf-8"?>
<Export>
  <Row> 
 
 
  <Dim1="0h" Metric1="4864" />
  <Row Dim1="1h" Metric1="2660"  />
  <Row Dim1="2h" Metric1="2200"  />
  <Row Dim1="3h" Metric1="1789"  />
</Row>
 
 </Export>

Et voici ce que j'ai essayé de faire :

Code:

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
<html>
<head>
 <script type="text/javascript">
$(document).ready(  
 function()
 {
   $.ajax( {
            type: "GET",
            url: "graph.xml",
            dataType: "xml",
            success: function(xml) 
                     {
                       $(xml).find('Row').each(   
                         function()
                         {
 
                            var heures = $(this).find('Dim1').text();
                            var nbr = $(this).find('Metric1').text();
                            $('<div class="items"></div>').html('<a href="' + heures + '">' + nbr + '</a>').appendTo('#xml');
 
                          });
                      }
        });
  }
);
</script>
</head>
<body>
	<div id="xml"></div>
</body>
</html>

Je n'ai pas trouvé non plus comment, une fois cela fait pour mettre le contenu de mon parssage de mon xml sous forme de tableau.

Ps: je ne peux pas avoir ce fichier sous forme de json, je fais appel a une api.

Merci.

25/09/2012, 17h24
Bovino

C'est normal que tu n'y arrives pas : tu as deux types de balises <Row> différents : celles qui possèdent une balise <Dim1> enfant et celles qui possèdent un attribut Dim1 or on ne récupère pas la valeur d'un attribut de la même façon que le contenu d'une balise...

Bref, le XML est un peu bancal niveau conception et si tu n'as pas la possibilité de le rendre plus cohérent, tu devras tester si tu cherches un attribut ou une balise.
25/09/2012, 17h31
thecatz

ok merci, mais je n'ai aucune idée comment faire cela :)
"tu devras tester si tu cherches un attribut ou une balise." Je peux trouver ce type d'info où ? :mouarf:

Le XML est mal codé !

Il y a confusion entre le tag Dim1 et l'attribut Dim1.

Fichier XML corrigé :

Code:

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="UTF-8"?>
<Export>
	<Row>
		<Dim1 Dim1="0h" Metric1="4864"/>
		<Row Dim1="1h" Metric1="2660"/>
		<Row Dim1="2h" Metric1="2200"/>
		<Row Dim1="3h" Metric1="1789"/>
	</Row>
</Export>

JS Exemple :

Code:

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
	$.get( "dim.xml", function( data, textStatus, jqXHR ){
		var heures,
			nbr,
			divItems = $( "<div/>", {
				"class" : "items"
			});
 
		$( data ).find( "Export" ).children().each( function( i, item){
			$( item ).children().each( function( j , jtem ){
				heures = $( jtem ).attr( "Dim1" );
				nbr = $( jtem ).attr( "Metric1" );
 
				$( divItems )
					.clone()
					.html( '<a href="' + heures + '">' + nbr + '</a>')
					.appendTo( "#xml" );
			});
		});
 
		/*
			// Résultat :
 
			<div id="xml">
				<div class="items">
					<a href="0h">4864</a>
				</div>
				<div class="items">
					<a href="1h">2660</a>
				</div>
				<div class="items">
					<a href="2h">2200</a>
				</div>
				<div class="items">
					<a href="3h">1789</a>
				</div>
			</div>
		*/

Oui désolé , erreur de copier collé, voici le xml au complet qui met fourni par une api :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<Export>
  <Columns>
    <Dim1>Heures</Dim1>
    <Metric1>Visites</Metric1>
 
  </Columns>
  <Row Dim1="0h" Metric1="5347" Var1="" Diff1="5347" Rat1="0,0728940874947173" Metric12="0,0728940874947173" Var12="" Diff12="-2147483648" Metric2="116946" Var2="" Diff2="116946" Rat2="0,35501654473149" Metric5="21,8713297175987" Var5="" Diff5="21,8713297175987" />
  <Row Dim1="1h" Metric1="3121" Var1="" Diff1="3121" Rat1="0,0425476803948032" Metric12="0,0425476803948032" Var12="" Diff12="-2147483648" Metric2="7831" Var2="" Diff2="7831" Rat2="0,023772805925746" Metric5="2,50913168856136" Var5="" Diff5="2,50913168856136" />
  <Row Dim1="2h" Metric1="2362" Var1="" Diff1="2362" Rat1="0,0322004553324336" Metric12="0,0322004553324336" Var12="" Diff12="-2147483648" Metric2="6513" Var2="" Diff2="6513" Rat2="0,0197717130627485" Metric5="2,75740897544454" Var5="" Diff5="2,75740897544454" />
  <Row Dim1="3h" Metric1="1591" Var1="" Diff1="1591" Rat1="0,0216896377789593" Metric12="0,0216896377789593" Var12="" Diff12="-2147483648" Metric2="5406" Var2="" Diff2="5406" Rat2="0,0164111593454965" Metric5="3,39786297925833" Var5="" Diff5="3,39786297925833" />
  <Row Dim1="4h" Metric1="1692" Var1="" Diff1="1692" Rat1="0,0230665412457568" Metric12="0,0230665412457568" Var12="" Diff12="-2147483648" Metric2="5630" Var2="" Diff2="5630" Rat2="0,0170911629883732" Metric5="3,3274231678487" Var5="" Diff5="3,3274231678487" />
  <Row Dim1="5h" Metric1="2206" Var1="" Diff1="2206" Rat1="0,030073752948073" Metric12="0,030073752948073" Var12="" Diff12="-2147483648" Metric2="10108" Var2="" Diff2="10108" Rat2="0,0306851643848092" Metric5="4,58204895738894" Var5="" Diff5="4,58204895738894" />
  <Row Dim1="6h" Metric1="4684" Var1="" Diff1="4684" Rat1="0,063855602361185" Metric12="0,063855602361185" Var12="" Diff12="-2147483648" Metric2="16577" Var2="" Diff2="16577" Rat2="0,0503233053034213" Metric5="3,53906917164816" Var5="" Diff5="3,53906917164816" />
  <Row Dim1="7h" Metric1="10821" Var1="" Diff1="10821" Rat1="0,147519528853626" Metric12="0,147519528853626" Var12="" Diff12="-2147483648" Metric2="34800" Var2="" Diff2="34800" Rat2="0,105643423089767" Metric5="3,21596894926532" Var5="" Diff5="3,21596894926532" />
  <Row Dim1="8h" Metric1="19478" Var1="" Diff1="19478" Rat1="0,265537878478045" Metric12="0,265537878478045" Var12="" Diff12="-2147483648" Metric2="66604" Var2="" Diff2="66604" Rat2="0,202191797456058" Metric5="3,41944758188726" Var5="" Diff5="3,41944758188726" />
  <Row Dim1="9h" Metric1="22051" Var1="" Diff1="22051" Rat1="0,300614835112402" Metric12="0,300614835112402" Var12="" Diff12="-2147483648" Metric2="58995" Var2="" Diff2="58995" Rat2="0,179092923712091" Metric5="2,675388871253" Var5="" Diff5="2,675388871253" />
</Export>

26/09/2012, 09h50
Bovino

Citation:

qui me fourni ce xml

Etonnant vu qu'il n'est pas conforme :koi:

Citation:

Code:

<Dim1="0h" Metric1="4864" />

ne veut rien dire en XML !

Je viens de modifier mon code xml dans mon post plus haut désolé pour mon erreur de copié collé, j'ai cependant toujours pas compris, comment fonctionnait :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
$.get( "graph.xml", function( data, textStatus, jqXHR ){
		var heures,
			nbr,
			divItems = $( "<div/>", {
				"class" : "items"
			});
 
		$( data ).find( "Export" ).children().each( function( i, item){
			$( item ).children().each( function( j , jtem ){
				heures = $( jtem ).attr( "Dim1" );
				nbr = $( jtem ).attr( "Metric1" );
 
				$( divItems )
					.clone()
					.html( '<a href="' + heures + '">' + nbr + '</a>')
					.appendTo( "#xml" );
			});
		});
         </script>

Je viens de testé et j'ai toujours une page blanche, rien ne s'affiche :(

26/09/2012, 10h09
Bovino
Est-ce que tu cherches au moins à comprendre ce que tu fais ? :no:

Code:

$( data ).find( "Export" )

pourquoi veux-tu récupérer la balise <Export> alors que les informations que tu cherches sont dans les balises <Row> 8O

Ensuite, tu fais une boucle sur les balises enfant (donc entre autres, les balises <Row>) et dans cette boucle, tu fais

Code:

$( item ).children()

Seulement, tu ne l'as peut-être pas remarqué, mais ces balises sont autofermantes !!! Je vois donc mal ce que tu attends comme enfants !
Code:

1 2 3 $( data ).find( "Row" ).each( function( i, item){ console.log($(item).attr('Dim1'), $(item).attr('Metric1')); });
est largement suffisant...

bon je sais que mon code est faux, mais j'essaye de comprendre ce que je fais :)

Et il possible de me dire une nouvelle fois, ce que je fais de mal ?

Code:

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
<html>
<head>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Ici je vais chercher mon fichier xml
 $.ajax({ 
 type: "GET", 
 url: "graph.xml", 
 dataType: "xml", 
 success: function($data){parseXml($data)} 
}); 
 
//ici je créer la fonction parsexml qui prends le nom data
 
function parseXml($data){ 
 $(data).find('Row').each(function(i, item){ 
   title = $(item).attr('Dim1'), 
   description = $(item).attr('Metric1'))); 
   $data += title + " " + description + " 
"; 
 }); 
 $('#resultxml').html($data); 
} 
 
</head>
 
<body>
<div id="resultxml"></div>
</body>
</html>

26/09/2012, 11h27
Bovino

Déjà, tu passes à la fonction un paramètre nommé $data mais tu utilises data... :aie:
26/09/2012, 12h02
thecatz

tu veux dire que :

cette ligne

Code:

$(data).find('Row').each(function(i, item){

doit être :

Code:

$($data).find('Row').each(function(i, item){

?

Bonsoir,
il faut admettre que tu cherches à faire des erreurs :aie:

Code:

1
2
3
4
5
6
7
8
9
function parseXml( param){ 
  var recup = '';
  $( param).find('Row').each(function(i, item){ 
    title = $(item).attr('Dim1'), 
    description = $(item).attr('Metric1'))); 
    recup += title + " " + description + " "; 
  }); 
  $('#resultxml').html( recup); 
}

Bonsoir

Suite à la modification du fichier XML à traiter, voici la version de mon code qui lui correspond.

Code:

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
// Si la structure du XML change, il faut adapter le code.
 
/*
	Suite à plusieurs expériences malheureuses dues à des fichiers
	XML qui utilisent des tags de même nom à différents niveaux,
	je démarre toujours la lecture par le tag principal avec la
	méthode find() et ensuite j'explore les enfants.
*/
 
// URL en fonction du nom du fichier, chez moi c'est dim.xml !
 
$.get( "dim.xml", function( data, textStatus, jqXHR ){
	var heures,
		nbr,
		divItems = $( "<div/>", {
			"class" : "items"
		});
 
	$( data ).find( "Export" ).children( "Row" ).each( function( i, item){
			heures = $( item ).attr( "Dim1" );
			nbr = $( item ).attr( "Metric1" );
 
			$( divItems )
				.clone()
				.html( '<a href="' + heures + '">' + nbr + '</a>')
				.appendTo( "#xml" );
	});
});