1637 sujets

Formats, encodage, internationalisation, XML

Juste un peu d'aide pour démarrer pour parser XML dans HTML

Bonjour à tous,
Voici je bloque sur un sujet simple et j'ai presque honte de vous demander (si si Smiley bawling Smiley bawling )
J'ai un fichier xml de cette forme :

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


Je voudrais avec uniquement javascript et le dom xml afficher au moins une information pour chacune de mes balises

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 : 


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...) [/i]
Salut,

Pour récupère chaque panneau, il faut bouclé sur chaque nœud susceptible de les contenir.
Pour schématisé voilà la structure du document

Les numéro indique le nombre de nœud (l'étoile un nombre indéfinie)

1 -> reseau
  1 -> liste_communes
    * -> commune
      1 -> liste_iris
        * -> iris
          1 -> magasin
            1 -> liste_prix
              * -> panneau


En gros, à chaque étoile une boucle, dans ton cas, 3 boucles imbriquée.
Ce genre de code devient rapidement verbeux. Mais vu que j'avais que ça à faire... Smiley lol 


/**
 * @param document node
 * @param object names : effectue un getElementsByTagName sur chaque nœud et récupère le premier résultat
 * @param string name : si présicé retourne retourne tout les résultat de getElementsByTagName après avoir chercher tous les names
 */
function getNodeNames(node, names, name)
{
	try {
		for (var i_n in names)
		{
			node = node.getElementsByTagName(names[i_n])[0];
		}
	} catch (e) {
		return [];
	}
	return name ? node.getElementsByTagName(name) : node;
}

/**
 * Effectue getNodeNames sur chaque élement de names
 * @param document node
 * @param object names : {{nameNode,...}|{{nameNode,...}, name}, ...}
 */
function getRecursiveNodeNames(node, names)
{
	var nodes = [ node];
	for (var i_ns in names)
	{
		var ns, name;
		if (typeof names[i_ns] === "string")
			ns = names;
		else
		{
			ns = names[i_ns][0];
			name = names[i_ns][1];
		}

		node = nodes;
		nodes = [];
		for (var i_n in node)
		{
			var get = getNodeNames(node[i_n], ns, name);
			if (!get)
				break;
			for (var i_g = 0; i_g < get.length; ++i_g)
			{
				nodes.push(get[i_g]);
			}
		}
	}
	return nodes;
}

function test(xmlDoc)
{
	var panneaux = getRecursiveNodeNames(xmlDoc, [
		[["reseau", "liste_communes"], "commune"],
		[["liste_iris"], "iris"],
		[["magasin", "liste_px"], "panneau"]
	]);
	console.log(panneaux);
	for (var i_px in panneaux)
	{
		console.log("--- panneau ---");
		var panneau = panneaux[i_px].childNodes;
		for (var i_p in panneau)
		{
			//ne pas prendre en compte les nœuds vide et les text vide ajouté par ff
			if (!panneau[i_p].nodeName || panneau[i_p].nodeName === "#text" && !panneau[i_p].firstChild)
				continue;

			console.log(panneau[i_p].nodeName + " : " + (panneau[i_p].firstChild ? panneau[i_p].firstChild.nodeValue : ""));
		}
	}

        //fait la même chose qu'au dessus
	/*var communes = getNodeNames(xmlDoc, ["reseau", "liste_communes"], "commune");

	for (var i_c in communes)
	{
		var iris = getNodeNames(communes[i_c], ["liste_iris"], "iris");

		for (var i_r in iris)
		{
			var panneaux = getNodeNames(iris[i_r], ["magasin", "liste_px"], "panneau");
			for (var i_px in panneaux)
			{
				var panneau = panneaux[i_px].childNodes;
				for (var i_p in panneau)
				{
					//ne pas prendre en compte les nœuds vide et les text vide ajouté par ff
					if (!panneau[i_p].nodeName || panneau[i_p].nodeName === "#text" && !panneau[i_p].firstChild)
						continue;

					console.log(panneau[i_p].nodeName + " : " + (panneau[i_p].firstChild ? panneau[i_p].firstChild.nodeValue : ""));
				}
			}
		}
	}*/
}

console.log("start");
var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest : new ActiveXObject("Msxml2.XMLHTTP");
xhr.onreadystatechange = function(){
	if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
		test(xhr.responseXML);
	}
}
xhr.open("GET", "xml.xml", true);
xhr.send(null);
console.log("end");


EDIT : sinon y a les fonctions Xpath

EDIT2 : le fofo avais supprimer mon tableau "[ node]" Smiley ohwell
Modifié par jo_link_noir (23 Apr 2010 - 01:16)
Ok je te remercie et regarde ça avec attention demain
Mais je ne vois pas de commande qui écrit les info lues dans du html
Est-ce normal ?
A moins que cela soit la commande console ?

autre question : la partie qui est en commentaire est là pour montrer comment on pourrait faire autrement ? Ou bien autre utilité ?

Dois-je inclure au chargement de ma page html une de tes fonctions ? Si oui, laquelle dois-je mentionner ?

Alors même si tu n'avais pas beaucoup de chose à faire, je te remercie encore d'avoir pris le temps de m'aider
Je reviens vers toi parce que certaines lignes de code sont totalement nébuleuses pour moi

bonne soirée
iviewclear a écrit :
Mais je ne vois pas de commande qui écrit les info lues dans du html
Est-ce normal ?
A moins que cela soit la commande console ?

Oui, le console.log permet d'afficher un message dans la console ^^. Avec firebug (module firefox) ça l'affiche dans le menu console (normale) et peut-être aussi dans la console d'erreur (menu outil). Je trouve ça plus simple qu'une alerte ou de l'afficher dans le html.

iviewclear a écrit :
la partie qui est en commentaire est là pour montrer comment on pourrait faire autrement ? Ou bien autre utilité ?

Elle fait la même chose que le code au dessus mais n'utilise pas getRecursiveNodeNames. A la place ça fait les 3 boucles dont je parlais avant + une boucle pour afficher le contenu du panneau. La boucle pour afficher le contenu est la même dans les 2 cas.

iviewclear a écrit :
Dois-je inclure au chargement de ma page html une de tes fonctions ? Si oui, laquelle dois-je mentionner ?

Si tu utilises le code en commentaire il faut getNodeNames et si c'est la partie non commentais il faut en plus ajouter getRecursiveNodeNames.
J'ai appelé le fichier xml par ajax, mais je sais pas comment tu gères ça dans ton code. T'as qu'à copié le contenu de ma fonction test à l'endroit qui ne marchait pas de ton code.

iviewclear a écrit :
Alors même si tu n'avais pas beaucoup de chose à faire, je te remercie encore d'avoir pris le temps de m'aider
Je reviens vers toi parce que certaines lignes de code sont totalement nébuleuses pour moi

C'est pas un problème Smiley smile .

Bonne nuit.
Salut
Bon je me suis penché sur ton code
mais après étude tu utilises XmlHttpRequest qui ne va pas être bon pour moi car je suis en local dans ma problématique
Je risque d'avoir des soucis pour charger mon xml en fonction des navigateurs
Je crois qu'on peut charger des données uniquement par le DOM
As tu une idée ou une piste sur le sujet

ceci dit, j'ai réussi quand même à affiche des choses même si j'ai l'impression que le traitement ne se terminait jamais

Merci
a+
Salut,

J'avais pas vu mais le forum à supprimer un bout Smiley ohwell 

function getRecursiveNodeNames(node, names) 
{ 
    var nodes = [ node]; //ici le [ node] n'apparaissait pas....
...



En fait j'utilise pas que XMLHttpRequest mais aussi ActiveXObject

var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest : new ActiveXObject("Msxml2.XMLHTTP");

//en décortiquant ça fait
var xhr;
if (window.XMLHttpRequest)
    xhr = new window.XMLHttpRequest;
else
    xhr = new ActiveXObject("Msxml2.XMLHTTP");



J'ai pas comprit la problématique sur ce coup.
Reprendre le xmlDoc qu'il y avais dans ton code ne suffit pas ?
Salut
Si j'ai bien compris ce que l'on me dit par ailleurs, l'objet XmlHttpRequest ne peut servir qu'en mode serveur web et non pas en local malgré que certains navigateurs permettent son utilisation parce qu'ils disposent d'options de sécurité "basses".

IE, lui, ne veut pas en entendre parler à partir du moment où il ne détecte pas un serveur web quelque part qui lui fournit des données (ici notre fichier Xml).

C'est pour cela que du coup je demandais si tu avais une piste pour charger un xml uniquement que par les fonctions DOM. Je sais que c'est possible : je cherche mais je n'ai pas encore trouvé.

Mais sinon comme je te l'ai dit, il y a des choses qui s'affichent mais par contre le navigateur me fait savoir qu'il traite la page sans s'arrêter (icône de chargement qui tourne tout le temps)

Merci encore pour l'aide apportée
Voila je continue à chercher
Sujet clos
Aller à