Alimenter un tableau avec une source XML

Version imprimable

Salut,

j'aimerais écrire une fonction Javascript compatible FF/IE pour alimenter un tableau javascript avec les valeurs issues d'une source XML, et je ne sais pas trop par quoi commencer donc si une bonne âme est disponible pour m'aiguiller voici quelques détails:

1) la source XML:

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
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
<?xml-stylesheet type="text/xsl" href="habillage.xsl"?>
<document>
	<stage>
		<modules>
			<module name="module1" id="1">
				<elements>
					<element>
						<id><![CDATA[1]]></id>
						<title><![CDATA[Titre de l'element]]></title>
						<content type="txt/htm"><![CDATA[http://www.mondomaine.fr/monfichier11.gif]]></content>
					</element>
					<element>
						<id><![CDATA[2]]></id>
						<title><![CDATA[Titre de l'element]]></title>
						<content type="txt/htm"><![CDATA[http://www.mondomaine.fr/monfichier12.gif]]></content>
					</element>
					<element>
						<id><![CDATA[3]]></id>
						<title><![CDATA[Titre de l'element]]></title>
						<content type="txt/htm"><![CDATA[http://www.mondomaine.fr/monfichier13.gif]]></content>
					</element>
					<element>
						<id><![CDATA[4]]></id>
						<title><![CDATA[Titre de l'element]]></title>
						<content type="txt/htm"><![CDATA[http://www.mondomaine.fr/monfichier14.gif]]></content>
					</element>
					<element>
						<id><![CDATA[5]]></id>
						<title><![CDATA[Titre de l'element]]></title>
						<content type="txt/htm"><![CDATA[http://www.mondomaine.fr/monfichier15.gif]]></content>
					</element>
				</elements>
			</module>
			<module name="module2" id="2">
				<elements>
					<element>
						<id><![CDATA[1]]></id>
						<title><![CDATA[Titre de l'element]]></title>
						<content type="txt/htm"><![CDATA[http://www.mondomaine.fr/monfichier21.gif]]></content>
					</element>
					<element>
						<id><![CDATA[2]]></id>
						<title><![CDATA[Titre de l'element]]></title>
						<content type="txt/htm"><![CDATA[http://www.mondomaine.fr/monfichier22.gif]]></content>
					</element>
					<element>
						<id><![CDATA[3]]></id>
						<title><![CDATA[Titre de l'element]]></title>
						<content type="txt/htm"><![CDATA[http://www.mondomaine.fr/monfichier23.gif]]></content>
					</element>
					<element>
						<id><![CDATA[4]]></id>
						<title><![CDATA[Titre de l'element]]></title>
						<content type="txt/htm"><![CDATA[http://www.mondomaine.fr/monfichier24.gif]]></content>
					</element>
					<element>
						<id><![CDATA[5]]></id>
						<title><![CDATA[Titre de l'element]]></title>
						<content type="txt/htm"><![CDATA[http://www.mondomaine.fr/monfichier25.gif]]></content>
					</element>
				</elements>
			</module>
		</modules>
	</stage>
</document>

2) Les éléments de la fonction

- emplacement : habillage.xsl

- tableau en variable globale:

Code:

var montableau = new Array();

- fonction et paramètre :

Code:

1
2
AlimenterLeTableauAvec("module1");
AlimenterLeTableauAvec("module2");

où "module1" et "module2" sont les noeuds de la source xml à considérer pour chaque appel, mais aussi l'unique paramètre de la fonction!

- pour chaque "element" de "moduleN" je voudrais faire ceci:

Code:

montableau[<id du noeud moduleN>].push(<valeur de element/content>);

ouala ouala, personnellement je vais travailler là dessus dès demain, merci d'avance pour vos suggestions :aie:

17/10/2006, 09h04
SpaceFrog

ton fichier xml il est en local ou distant ?
17/10/2006, 11h40
krapno
Code:

1 2 3 4 5 <?xml-stylesheet type="text/xsl" href="habillage.xsl"?> <document> <stage> <modules> (...)
la source xml est "habillée" cache pistache par le "habillage.xsl" :)

Tu peux charger un document Xml avec le code suivant

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
 
var xmlDoc;
 
function loadMenu(fichierXML) { // fichierXML : chemin+nom du fichier
    // cette fonction a pour but de charger le fichier XML
    if (document.implementation && document.implementation.createDocument) { // code pour Mozilla
        xmlDoc = document.implementation.createDocument("","",null);
        xmlDoc.load(fichierXML);
        xmlDoc.onload=traiteXML();
        xmlDoc.close;
    }
    else if (window.ActiveXObject)
    {
 
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.load(fichierXML);            
        traiteXML();
     }
    else {
        alert('le script n\'est pas compatible avec votre navigateur');
    }
}
 
function traiteXML() {
        // mettre ici le code pour afficher et/ou traiter le XML
}

Voilà, j'espère que çà répond à ta question

17/10/2006, 12h38
guy777

Juste une précision :

Dans mon code précédent, la variable XMLDom est un objet qui se parcourt très facilement, de la meme manière que l'objet Document... getElementsByName est une fonction très appréciable pour ce genre de prog

Voili voilou

salut, et merci pour ta suggestion, mon problème c'est que "l'habillage" xsl qui contient la fonction javascript ne doit pas avoir à passer d'url pour charger la source xml, celle-ci est "implicite"... je sais pas si c'est clair, voilà ce que j'ai écris pour l'instant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function AlimenterLeTableauAvec(NodeStart) { var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); xmldoc.load("/"); // Ici je ne suis pas sûr que ce soit la bonne méthode! var xmlElements = xmldoc.getElementsByTagName(NodeStart); var e; var id, content; for (var i=0;i<xmlElements.length;i++) { e = xmlElements[i]; id = e.getElementsByTagName("id")[0].firstChild.data; content = e.getElementsByTagName("content")[0].firstChild.data; alert("id="+id+"\ncontent="+content); } } AlimenterLeTableauAvec("module1"); AlimenterLeTableauAvec("module2");

17/10/2006, 14h01
guy777

Ben c'est pas grave, tu peux avec quelques modifications mineures le faire...
Je vois pas bien où est le problème ! Pourrais-tu expliciter le terme "implicite" ?
17/10/2006, 14h04
krapno

regardes la ligne où j'ai écris çà:

Code:

xmldoc.load("/");

ce que je veux dire c'est que XSL doit forcement connaître le XML puisque le XSL est chargé par le XML.
17/10/2006, 14h07
guy777

Ah oui, mais mon script ne passe pas du tout par XSL, c'est une fonction javascript qui va construire le tableau à partir des données trouvées dans le XML...

j'ai repris ton code et voilà où on en est:

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
38
39
40
41
42
var montableau = new Array();
var xmldoc;
 
function traiteXML(NodeStart) {
 
	var xmlElements = xmldoc.getElementsByTagName(NodeStart);
 
	var e;
	var id, content;
 
	for (var i=0;i<xmlElements.length;i++) {
		e = xmlElements[i];
 
		id	= e.getElementsByTagName("id")[0].firstChild.data;
		content	= e.getElementsByTagName("content")[0].firstChild.data;
 
		montableau[id].push(content);
	}
}
 
function AlimenterLeTableauAvec(NodeStart) {
 
    var SourceXML = "/";
 
    if (document.implementation && document.implementation.createDocument) { // code pour Mozilla
        xmlDoc = document.implementation.createDocument("","",null);
        xmlDoc.load(SourceXML);
        xmlDoc.onload=traiteXML(NodeStart);
        xmlDoc.close;
    } else if (window.ActiveXObject) { // code pour IE
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.load(SourceXML);            
        traiteXML(NodeStart);
     }
    else {
        alert('le script n\'est pas compatible avec votre navigateur');
    }
}
 
AlimenterLeTableauAvec("module1");
AlimenterLeTableauAvec("module2");

17/10/2006, 14h27
guy777

Mouais, je pense pas que le load("/"); fonctionne... change d'optique et passe en dur l'URL du XML à load(), on est quand même pas obligé de traiter du XML avec XSL (si t'es obligé, je pense qu'on va avoir du mal à coupler du javascript)

AlimenterLeTableauAvec prend en paramètre d'entrée NodeStart c'est à dire, si je comprends bien, un objet Node ???

Bon, eh bien il ne te reste plus qu'à te positionner sur le bon noeud dans le Xmldoc comme tu le fais déjà dans la fonction traiteXml(), ce qui me servirait c'est quel résultat tu obtiens et si cela ne te satisfait pas quel résultat voudrais-tu obtenir ? Et de plus, donne la structure de ton fichier XML.
[FONT=monospace][/FONT]
17/10/2006, 14h47
krapno

Citation:

Envoyé par guy777

Mouais, je pense pas que le load("/"); fonctionne...

et il doit donc bien exister une autre méthode...

Citation:

Envoyé par guy777

on est quand même pas obligé de traiter du XML avec XSL

Bin XML étant deja chargé çà serait bien dommage d'avoir à le loader une seconde fois...

Citation:

Envoyé par guy777

AlimenterLeTableauAvec prend en paramètre d'entrée NodeStart c'est à dire, si je comprends bien, un objet Node ???

Oui, absoluement !

Citation:

Envoyé par guy777

ce qui me servirait c'est quel résultat tu obtiens et si cela ne te satisfait pas quel résultat voudrais-tu obtenir ? Et de plus, donne la structure de ton fichier XML.

j'ai deja donné ces éléments dans mon 1er post :aie:
17/10/2006, 14h58
guy777

Citation:

Bin XML étant deja chargé çà serait bien dommage d'avoir à le loader une seconde fois...

Ben non, il n'est chargé qu'une seule fois dans la mesure où on ne fait qu'un appel à load();

Je comprends pas pourquoi tu veux pas mettre l'URL dans load() ? 8O
Ce que je te propose, c'est une alternative simple à XSL, donc de l'oublier complètement, bon par contre cela oblige à générer le tableau entièrement en Javascript dans la fonction traiteXML.

J'ai lu ton premier post, qu'attends tu de XSL ? C'est le seul élément où je suis un peu perplexe ...

ok voici quelques precisions:

1) Je genere un fichier XML dynamiquement avec PHP, mais je ne me contente pas d'afficher le résultat brut dans mon navigateur, je l'habille avec:

Code:

<?xml-stylesheet type="text/xsl" href="habillage.xsl"?>

2) XSL est parfaitement capable d'utiliser le source XML avec des instructions telles que:
Code:

1 2 3 <xsl:for-each select="document/stage/modules/module[@name='module1']/elements/element"> <instructions xsl/html> </xsl:for-each>
3) Toujours dans mon XSL je peux très bien remplir manuellement mon tableau de valeurs
Code:

1 2 3 4 5 6 7 <script language="JavaScript" type="text/javascript"><![CDATA[  ]]></script>
4) Ce que je voudrais faire c'est faire executer l'instruction

Code:

montableau[0].push('ce que je veux');

à l'aide des éléments chargés dans le source XML

alors là il me vient une idée, mais je sais pas si c'est bien correct car çà me paraît un peut barbare, çà serait d'ecrire un truc du genre:
Code:

1 2 3 4 5 6 7 8 9 <xsl:for-each select="document/stage/modules/module[@name='module1']/elements/element"> <script language="JavaScript" type="text/javascript"><![CDATA[  ]]> </script> </xsl:for-each>

17/10/2006, 15h40
guy777

Ok, c'est plus clair ... ;)

Bon le soucis c'est que je crois que si tu veux utiliser Javascript (je savais pas qu'un script js fonctionnait dans un fichier xsl) tu vas devoir le charger comme je te l'ai dit, je vois pas comment profiter du chargement que fait XSL...

Ce que je proposais avec mon code, c'est de stocker les données XML sous forme de tableau (comme tu le voulais) ET de générer l'affichage des données une page HTML avec cette même fonction en utilisant par exemple les données compilées dans le tableau, donc de se passer entièrement de XSL, ce qui est parfaitement réalisable.

Evidemment l'affichage des données dans le navigateur, n'exploite pas la simplicité et la clarté de XSL... mais bon, je pense que tu vas devoir faire un choix à partir de là, parce que je n'ai pas d'autres solutions...

Pour le point 5, cela me parait plus que douteux et sujet à risques !
17/10/2006, 15h50
krapno

ouaip, la fonction "xmlDoc.load(SourceXML);" marche très bien pour SourceXML=fichier.xml ou une url, mais mon objectif est bien de ne pas avoir à charger un document externe, je continue mes recherches sur le sujet, je te tiens informé sur ce sujet ;)
17/10/2006, 15h53
guy777

D'accord, mais à mon avis, doit pas y avoir 36 solutions !!!
17/10/2006, 16h05
krapno

Citation:

Envoyé par guy777

D'accord, mais à mon avis, doit pas y avoir 36 solutions !!!

suffit de la trouver, j'adore ce genre de defis ;)
17/10/2006, 17h09
krapno

peut-être que:

Code:

documentElement.selectNodes(".")

nous sauvera... je verrai çà demain ;)

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
var montableau = new Array();
 
function AlimenterLeTableauAvec(NodeStart) {
 
	var nbXMLmodules, nbXMLelements, elementcontent;
 
 	var XMLSource = new Object();
  	XMLSource = document.XMLDocument;
 
	var XMLelements = new Object();
	XMLelements = document.XMLDocument;
 
	var XMLmodules = XMLSource.documentElement.selectNodes("//document/stage/modules/module/@name");
	nbXMLmodules = XMLmodules.length;
 
	for(var i=0;i<nbXMLmodules;i++){ // pas forcement utile je pense
 
		montableau[i] = new Array(); // i sera l'index des elements du module dans montableau
 
		XMLelements = XMLSource.documentElement.selectNodes("//document/stage/modules/module[@name='"+NodeStart+"']/elements/element/content");
		var nbXMLelements = XMLelements.length;
 
		for(var j=0;j<nbXMLelements;j++){
			elementcontent = XMLelements[j].text;
			//alert("elementcontent = "+elementcontent);
			montableau[j].push(elementcontent);
		}
	}
}
 
AlimenterLeTableauAvec("Banner_A1");

Compatible IE uniquement pour le moment, puis y a moyen d'optimiser tout çà, une bonne nuit et demain je paufine :mrgreen: @+

18/10/2006, 12h23
krapno
ok j'ai implémenté ma fonction dans mon projet, çà tourne nikel, j'aimerais maintenant la rendre compatible avec Firefox au niveau de la lecture du XML:
Code:

1 2 var XMLSource = new Object(); XMLSource = document.XMLDocument;
n'étant valable que pour IE apparement :aie: