Alimenter un tableau avec une source XML

**krapno** · 16/10/2006, 20h38

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 :

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

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

var montableau = new Array();

- fonction et paramètre :

Code :

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

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 :

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

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

**SpaceFrog** · 17/10/2006, 09h04

ton fichier xml il est en local ou distant ?

**krapno** · 17/10/2006, 11h40

Code :

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

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"

**guy777** · 17/10/2006, 12h33

Tu peux charger un document Xml avec le code suivant

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

**guy777** · 17/10/2006, 12h38

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

**krapno** · 17/10/2006, 13h58

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 :

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

**guy777** · 17/10/2006, 14h01

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

**krapno** · 17/10/2006, 14h04

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

Code :

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

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.

**guy777** · 17/10/2006, 14h07

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

**krapno** · 17/10/2006, 14h14

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

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

**guy777** · 17/10/2006, 14h27

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]

**krapno** · 17/10/2006, 14h47

Envoyé par guy777

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

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

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

Envoyé par guy777

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

Oui, absoluement !

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

**guy777** · 17/10/2006, 14h58

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

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

**krapno** · 17/10/2006, 15h18

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 :

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

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

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

Code :

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

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 :

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

1
2
3
4
5
6
7
<script language="JavaScript" type="text/javascript"><![CDATA[
<!--
montableau[0] = new Array();
montableau[0].push('ce que je veux');
montableau[0].push('encore ce que je veux');
//-->
]]></script>

4) Ce que je voudrais faire c'est faire executer l'instruction

Code :

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

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 :

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

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[
<!--
montableau[]]><xsl:value-of select="id"/><![CDATA[].push(']]><xsl:value-of select="content"/><![CDATA[');
//-->
]]>
</script>
</xsl:for-each>

**guy777** · 17/10/2006, 15h40

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 !

**krapno** · 17/10/2006, 15h50

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

**guy777** · 17/10/2006, 15h53

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

**krapno** · 17/10/2006, 16h05

Envoyé par guy777

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

suffit de la trouver, j'adore ce genre de defis

**krapno** · 17/10/2006, 17h09

peut-être que:

Code :

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

documentElement.selectNodes(".")

nous sauvera... je verrai çà demain

**krapno** · 17/10/2006, 20h10

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