1633 sujets

Formats, encodage, internationalisation, XML

Lire un XML avec du Javascript

Bonjour à tous,

je suis entrain de "développer" une petite map perso grâce à l'API Google et j'utilise un fichier xml pour répertorier mes points sur la cartes. Jusque là rien de bien compliqué ^^

j'ai trouvé déjà un bout de script qui permet d'exploiter le fichier XML mais le XML fonctionne qu'avec des attributs et moi je le modifie pour ne faire que des noeuds (tags, excusez pour le vocabulaire je n'ai jamais vraiment utilisé le XML)

donc voici le script actuel:
function initialize() {
    [...] code google map avant je vous l'épargne [...]

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("moredata.xml", function(data) {
      var markers = data.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(markers[i].getAttribute("name"), latlng);
       }
     });
  }


donc dans ce code nous voyons que l'on récupère des Attribute "name" "lat" "lng"

le xml est actuellement celui-ci:

<markers>
<marker name="blabla bla bla" lat="43.28088769961758" lng="5.3881875934600885"/>
</markers>


et moi je voudrais le modifier en plusieurs noeuds:
<marker>
_____<name></name>
_____<lat></lat>
_____<lng></lng>
</marker>
...
<marker>
_____<name></name>
_____<lat></lat>
_____<lng></lng>
</marker>

seulement voilà je trouve pas comment faire, j'ai essayé de remplacer les getAttribute par des getElementsByTagName

seulement cela me créé des erreurs javascript...

Est-ce que quelqu'un peut m'aider sur la bonne formule javascript ?

Merci Smiley smile [/i][/i][/i]
Modifié par ekko (29 Jul 2011 - 09:34)
Smiley lol
scraly a écrit :
Avez vous trouvé une réponse a ce besoin ? Smiley cligne

Rien n'est moins sûr. Y a aucune réponse.
Modifié par jmlapam (19 Aug 2011 - 00:00)
Modérateur
Salut,

La méthode getElementsByTagName te permet de récupérer une collection d'éléments alors que getAttribute va te renvoyer la valeur de l'attribut.

Tu dois donc, à partir de la collection d'éléments, les parcourir par l'intermédiaire d'une boucle ou sélectionner celui que tu veux directement ( ex. : markers[0] pour sélectionner le premier ) puis en lire la valeur via la propriété nodeValue.
Bonjour

Précises ce que tu veux faire de ton fichier résultat.

Pour lire un xml il suffit d'utiliser une feuille de style XSL, qui te permet parcourir le fichier xml en extrayant les attributs.

1créé un fichier xsl (mafeuilledestyle.xsl....)

avec une séquence du type :


<xsl:template match="/">
<xsl:for-each select="markers/marker">
<xsl:value-of select="@lat"/>
<xsl:value--of select=@lng"/>
</xsl:for-each>
</xsl:template>


2ajoute dans la deuxième ligne du prolog xml la ligne suivante :
<?xml-stylesheet type="text/xsl" href="chemin/mafeuilledestyle.xsl"?>


3 Ouvre le fichier xml avec ton navigateur préféré.

tu devrais voir écrit l'ensemble des couples lat, lng

A toi ensuite d'imposer un style


Une méthode plus rustique dans ton cas et si tu tiens mordicus à transformer les attributs en éléments pour créer un fichier xml rien qu'avec des éléments, consisterait tout bêtement à lire le fichier xml d'origine avec PHP par exemple et à le réécrire avec la nouvelle structure, mais quel en est l'intérêt ? L'utilisation des attributs dans le cas présent me semble tout à fait justifié car cela rend le fichier plus compact, plus rapide à parcourir et beaucoup plus facile à exploiter.
Bon travail.
Modifié par rimousky (21 Aug 2011 - 22:36)
Sinon, en jQuery, tu peux facilement lire le fichier XML et le manipuler ensuite avec la syntaxe et les sélecteurs propres à ce framework.

Un petit exemple rapide :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 
</style>
<title>Test métro</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var map;

	function initialize() {
		var myLatlng = new google.maps.LatLng(48.85344916719353, 2.3478341102600098);
		var myOptions = {
			zoom: 12,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

		$.ajax({
			type: "GET",
			url: "data.xml",
			dataType: "xml",
			success: parseXml
		});
	}
	
	function parseXml(xml)
	{
		// SHOWING ALL THE STATIONS ON THE MAP
		
		$(xml).find("station").each(function()
		{
			var infowindow = new google.maps.InfoWindow({
				content:$(this).find("name").text()
			});

			var myLatlng2 = new google.maps.LatLng($(this).attr("lat"),$(this).attr("lng"));
			addMarker(myLatlng2,map,infowindow);
		});
		
	}
	
	function addMarker(latlon,map,infowindow) {
		var marker = new google.maps.Marker({
			position: latlon, 
			map: map,
			title:"Hello World!"
		}); 
		
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open(map,marker);
		});
	}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 800px; height: 600px"></div>
  <div id="output"></div>
</body>
</html>


Sachant que mon XML est structuré comme suit:

<stations>
    <station id="ABESS" lat="48.8844" lng="2.3384">
      <name><![CDATA[Abbesses]]></name>
      <ln nm="12"/>
    </station>
    <station id="ALESA" lat="48.8281" lng="2.3269">
      <name><![CDATA[Alésia]]></name>
      <ln nm="4"/>
    </station>
</stations>
Sujet clos
Aller à