Aide pour lire du xml

**thecatz** · 25/09/2012, 18h16

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 :

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

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 :

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
<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.

**Bovino** · 25/09/2012, 18h24

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.

**thecatz** · 25/09/2012, 18h31

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ù ?

**danielhagnoul** · 26/09/2012, 00h54

Le XML est mal codé !

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

Fichier XML corrigé :

Code XML :

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

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 :

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
	$.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>
		*/

**thecatz** · 26/09/2012, 10h45

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

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
<?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>

**Bovino** · 26/09/2012, 10h50

qui me fourni ce xml

Etonnant vu qu'il n'est pas conforme

Code :

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

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

ne veut rien dire en XML !

**thecatz** · 26/09/2012, 10h55

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 :

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
<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

**Bovino** · 26/09/2012, 11h09

Est-ce que tu cherches au moins à comprendre ce que tu fais ?

Code :

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

$( data ).find( "Export" )

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

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

Code :

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

$( 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 :

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

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

est largement suffisant...

**thecatz** · 26/09/2012, 12h20

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 :

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
<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>

**Bovino** · 26/09/2012, 12h27

Déjà, tu passes à la fonction un paramètre nommé $data mais tu utilises data...

**thecatz** · 26/09/2012, 13h02

tu veux dire que :

cette ligne

Code :

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

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

doit être :

Code :

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

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

?

**NoSmoking** · 26/09/2012, 23h24

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

Code :

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

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); 
}

**danielhagnoul** · 27/09/2012, 00h24

Bonsoir

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

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
// 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" );
	});
});

Aide pour lire du xml

jQuery

Discussions similaires

Partager

Partager