Chargement et lecture de XML dans JQuery

**slhuilli** · 18/04/2025, 18h53

bonjour,

dans un premier temps, je présente très rapidement, je suis plutot développeur PHP sans avoir la prétention d'être un bon DEV (je suis issu d'une formation réseau...)
Je n'ai fait que très peu de javascript/ajax et jquery et là je suis devant un sacré souci professionnel que j'ai bcp de mal à traiter (déja une journée complete de perdue)
j'ai besoin d'afficher une partie d'un doc XML document XML selon un critere
Une toute petite partie de mon XML se présente ainsi

Code xml :

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
<?xml version="1.0" encoding="utf-8"?>
<unmateriel>
	<contexte>
		<CODE1 clair="###">12345874</CODE1>
		<CODE2 precision="Pour ce NNO, la couleur est GRISE">145871245</CODE2>
		<LIBELLE>donnee</LIBELLE>
		<synonyme description="fegerg">donnee</synonyme>
		<materiellie description="###">###</materiellie>
	</contexte>
	<contexte>
		<CODE1 clair="###">12345874</CODE1>
		<CODE2 precision="Pour ce CODE1, la couleur est GRISE">145871245</CODE2>
		<LIBELLE>donnee</LIBELLE>
		<synonyme description="fegerg">donnee</synonyme>
		<materiellie description="###">###</materiellie>
	</contexte>
	<documents-four>
		<fichier typefonctionnel="T1" titre="2. titre 2" meta-auteur="L1" meta-poids="" meta-date="14-09-2014" date-debut="15-08-2013" url="http://blabla.com/ficGU1.pdf">Ce fichier  1</fichier>
		<fichier typefonctionnel="GU" titre="2. titre 1" meta-auteur="LH" meta-poids="" meta-date="14-09-2014" date-debut="15-08-2013" url="http://blabla.com/ficGU2.pdf">Ce fichier  2</fichier>
		<fichier typefonctionnel="MM" titre="1. GU gj,dhjf" meta-auteur="IEF Mamou OGAR" meta-poids="" meta-date="15-03-2025" date-debut="15-08-2024" date-fin="19-08-1987" ref-doc="98054-8"/>
		<fichier typefonctionnel="EMPLOI" titre="EMPLOI" meta-auteur="" meta-poids="" meta-date="00-01-1900">Bla bla bla</fichier>
	</documents-four>
	<documents-statiques>
		<fichier typefonctionnel="D" titre="MonTitre" meta-auteur="MonAuteur" meta-poids="20 Ko" meta-date="15-05-2014" date-debut="14-02-2030" ref-doc="DSA 1254-9" chemin-nas="\\monNAS\Seb\Marcek\Camion.pdf" url="https://eklad.tld/Debra_McLeod.pdf">Ce document recense…</fichier>
		<fichier typefonctionnel="TIT" titre="MonTCT" meta-auteur="MonAuteur" meta-poids="20 Ko" meta-date="15-05-2014" date-debut="15-05-2014" date-fin="14-02-2030" ref-doc="BAC 1254-9" chemin-nas="\\desoutien.pdf">Ce document recense…</fichier>
		<fichier typefonctionnel="Homol" titre="Homol1" meta-auteur="MOI" meta-poids="20 Ko" meta-date="25-08-2025" date-debut="01-01-2025" date-fin="31-12-2027" ref-doc="AA">blad</fichier>
	</documents-statiques>
	<notes>
		<note>Note 1</note>
	</notes>
</unmateriel>
<unmateriel>
	<contexte>
            <un-contexte>
		<CODE1 clair="###">123874</CODE1>
		<CODE2 precision="Pour ce NRO, la couleur est verte">145871245</CODE2>
		<LIBELLE>donnee</LIBELLE>
		<synonyme description="fegerg">donnee</synonyme>
		<materiellie description="###">###</materiellie>
             <un-contexte>
 
            <un-contexte>
		<CODE1 clair="###">1238fg74</CODE1>
		<CODE2 precision="Pour ce NRO, la couleur est verte">145871245</CODE2>
		<LIBELLE>donnee</LIBELLE>
		<synonyme description="fegerg">donnee</synonyme>
		<materiellie description="###">###</materiellie>
             <un-contexte>
	</contexte>
	<documents-four>
		<fichier typefonctionnel="T1" titre="2. titre 2" meta-auteur="L1" meta-poids="" meta-date="14-09-2014" date-debut="15-08-2013" url="http://blabla.com/ficGU1.pdf">Ce fichier  1</fichier>
		<fichier typefonctionnel="GU" titre="2. titre 1" meta-auteur="LH" meta-poids="" meta-date="14-09-2014" date-debut="15-08-2013" url="http://blabla.com/ficGU2.pdf">Ce fichier  2</fichier>
		<fichier typefonctionnel="MMMA" titre="1. GU gj,dhjf" meta-auteur="IEF Mamou OGAR" meta-poids="" meta-date="15-03-2025" date-debut="15-08-2024" date-fin="19-08-1987" ref-doc="98054-8"/>
		<fichier typefonctionnel="EMPLOI" titre="EMPLOI" meta-auteur="" meta-poids="" meta-date="00-01-1900">Bla bla bla</fichier>
	</documents-four>
	<documents-statiques>
		<fichier typefonctionnel="D" titre="MonTitre" meta-auteur="MonAuteur" meta-poids="20 Ko" meta-date="15-05-2014" date-debut="14-02-2030" ref-doc="DSA 1254-9" chemin-nas="\\monNAS\Seb\Marcek\Camion.pdf" url="https://eklad.tld/Debra_McLeod.pdf">Ce document recense…</fichier>
		<fichier typefonctionnel="TIT" titre="MonTCT" meta-auteur="MonAuteur" meta-poids="20 Ko" meta-date="15-05-2014" date-debut="15-05-2014" date-fin="14-02-2030" ref-doc="BAC 1254-9" chemin-nas="\\desoutien.pdf">Ce document recense…</fichier>
		<fichier typefonctionnel="Homol" titre="Homol1" meta-auteur="MOI" meta-poids="20 Ko" meta-date="25-08-2025" date-debut="01-01-2025" date-fin="31-12-2027" ref-doc="AA">blad</fichier>
	</documents-statiques>
	<notes>
		<note>Note 1</note>
	</notes>
</unmateriel>

je ne dispose plus de serveur web (php), c'est pour cette raison que je m'oriente vers ajax/javascript (je maitrise aussi le parc de navigateur web puisque c'est en intra : Firefox)
en jquery, j'ai vu qu'on pouvait sélectionner des noeuds d'un XML
J'ai cherché toute la journée à écrire mon code, mais je ne trouve aucune doc claire et explicite avec un code en regard. je n'ose même pas publier mes tests, j'ai honte ! Encore que ... interrogerAJAX.html
Mon XML n'est pas figé, je peux modifier pour le moment, je n'en suis qu'a l'étape d'analyse et je peux modifier tout ce que je veux (comme rajouter un id dans <un materiel>
si on analyse un peu, j'ai deux (ou trois ca dépend d'où on part) niveaux (en y'en aura pas plus car cette description colle à une norme interne qui n'évoluera pas sur ce sujet)

Du code j'en ai produit je cherche mais je pige pas, je ne sais pas comment faire ceci :
Comment puis-je lire mon XML (en ajax donc) et récupérer ces "sens de lecture" (qui finalement sont tous les même, selon le chemin a parcourir :

Liste des élément de des contextes pou UN materiel
Liste de tous les élément de des contextes pour TOUs les materiels

En effet, comme on peu le constater, la première requête ne bosse que sur le sous-ensemble unmateriel, alors que la deuxieme bosse sur tous le fichier. Ainsi, en me débloquant, je pourrais adapter vos deux réponses à toutes les situation.
Je bosse généralement avec des XPath, si des bibliothèques pour arriver à mon besoin existent (j'ai vu JQuery pouvait aider) , pas de soucis

Si quelqu'un pouvais me lancer sur la lecture de l'integralité d'un bloc UN MATERIEL et l'un de ses sous bloc, derriere je coderai le rester

Je compte détacher mes blocs XML dans un but de modulaisattion et les utiliser avec des xi:include, mais si c'est pas une bonne idée, je suis près à changer pour que ca marche en JS.

Avec tous mes sincères remerciements par avance

**mathieu** · 18/04/2025, 19h26

n'ayez pas honte de nous montrez votre code, on a tous été débutants dans notre vie.
de plus, montrer votre code est un peu obligatoire ici puisque c'est un forum de discussion donc cela permet à tous de lire ce que vous avez essayé et de vous donner des conseils. et personnellement quand je vois une question sans code, j'ai parfois la sensation désagréable que la personne n'a pas fait beaucoup d'effort et qu'elle veut juste que quelqu'un lui fasse son code gratuitement.
donc vous avez bien fait de nous montrer votre code (même s'il est un peu caché au milieu de votre question

)

mais avant de parler de votre code, je me demandais pourquoi ce fichier est au format xml, c'est un format imposé ? c'est un fichier exporté d'une autre application ?

**slhuilli** · 18/04/2025, 19h31

autant pour moi, effectivement je ne l'ai pas collé.
Pour démarrer, je me suis basé sur cet exemple qui n'est pas directement en lien avec mon fichier XML (je démarre toujours depuis des exempels)

Code html :

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
66
67
68
69
70
71
72
73
74
75
76
77
<html>
	<head> <!--  IIL FAUT LE PACER SUR UN SERVEUR WEB POUR problee XHR cross origin -->
	<script src="jquery.3.3.1.js"></script>
</head>
	<body onLoad="loadDoc()">
 
 
<p id="demo"></p>
 
		<script>
                
                                        // create xml object function declaration variations
                        if (window.DOMParser) {
                                parseXml = function(xmlStr) {
                                        return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
                                };
                        } else if (typeof window.ActiveXObject != "undefined" && new window.ActiveXObject("Microsoft.XMLDOM")) {
                                parseXml = function(xmlStr) {
                                        var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
                                        xmlDoc.async = "false";
                                        xmlDoc.loadXML(xmlStr);
                                        return xmlDoc;
                                };
                        } else {
                                parseXml = function() { return null; }
                        }
 
 
                        function loadDoc() {
                        const parser = new DOMParser();
                                const xhttp = new XMLHttpRequest();
                                xhttp.onload = function() {
                                        document.getElementById("demo").innerHTML = this.responseText;
                                        var root = this.responseText.documentElement; //OK
                                        //console.log(this.responseText);// Ca me retourne bien le XML !
                                         
                                         //var arr = xml2array(XmlHttp.responseXml);
                                        const doc = parser.parseFromString(this.responseText, "application/xml");
                                        const parsed = parser.parseFromString(this.responseText, 'text/html');
                                        console.log(parsed.body.innerHTML); // returns "<p>HTML</p>".
                                        console.log(parsed.body.innerText); // returns "HTML".
                                        
                                        
                                        
                                        //*******************************************************************
                                        // Il faut maintenant convertir le XML en HTML : https://stackoverflow.com/questions/28901778/javascript-xml-to-html
                                        //*******************************************************************
                                        
                                        // Convert to DOM HTML
                                        const html = $.parseHTML(parsed.body.innerText);
 
                                        // Set array for result
                                        const res = [];
 
                                        // Parse html, find data tags,
                                        // loop through it's content
                                        $(html).find("data").each(function() {
                                          // For each data element push
                                          // required data to array
                                          res.push([
                                                $(this).find("name").text(),
                                                $(this).find("designation").text(),
                                                $(this).find("phone").text()  ]);
                                        
});
 
// Test
console.log(res);
                                        
                                }
                                xhttp.open("GET", "./employee.xml");
                                xhttp.send();
}
</script>
<div id="demo"></div> 
	</body>
</html>

et

Code xml :

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
<?xml version="1.0" ?> 
<employees>
 <emp id="006">
   <name>John Chamber</name>
   <designation>Web Expert1</designation>
   <phone>555-55-555</phone>
 </emp>
 <emp id="007"> 
  <name>John D</name>
  <designation>Web123123</designation>
  <phone>555-55-555</phone>
 </emp>
 <emp id="008"> 
  <name>Chamber</name>
  <designation>Web Expert</designation>
  <phone>555-55-555</phone>
 </emp>
 <emp id="009">
   <name>Thomas</name>
   <designation>TESTTEST</designation>
   <phone>555-55-555</phone>
   <emp id="001">
		<name>Thomas</name>
		<designation>TESTTEST</designation>
		<phone>555-55-555</phone>
	</emp>
 </emp>
</employees>

il correspond à la structure de mon code (que je n'ai pas sous la mai là, c'est au boulot)

**mathieu** · 18/04/2025, 21h27

je viens de voir votre message là concernant ma question sur le format xml :
https://www.developpez.net/forums/d2.../#post12078486
je pense aussi que le format json serait plus intéressant si vous, ou vous collègues, modifiez le fichier à la main puisqu'il y a moins de probabilité de faire une erreur de syntaxe.
mais d'un autre côté, il est aussi possible de faire un éditeur en javascript qui charge le fichier des données et propose en téléchargement le fichier avec la modification. donc si vous prenez cette voie, le format n'importe plus beaucoup puisque vous n'allez presque plus le modifier à la main.

en ce qui concerne votre code, vous n'avez pas besoin d'analyser le code xml avec jquery puisque dans la "fonction onload" il est déjà décodé dans this["responseXML"].

donc vous pouvez tester ce code pour afficher la structure des données dans la console :

Code javascript :

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
 
[...this["responseXML"]["firstChild"]["children"]].forEach(employe => {
 
	console.log("++++++++++++++++++++++++++++++++ nouvelle balise emp");
	//console.log(employe);
	console.log(`identifiant : ${employe["id"]}`);
 
 
	[...employe["children"]].forEach(attribut => {
 
		console.log(`nom de la balise : "${attribut["nodeName"]}", valeur : "${attribut["textContent"]}"`);
 
	});
 
	console.log("--------------------- fin de traitement de la balise emp");
 
});

**slhuilli** · 19/04/2025, 08h27

Bonjour,

je comprends votre argument mais ce qui me gêne, c'est que l'utilisation de json va m'empêcher l'utilisation de XSL, XML et XSLT et j'ai fait ce choix justement pour pouvoir récupérer ces données avec des techno XSLT pour garantir a mes successeurs non informaticiens la possibilité simple d'édition de XML avec les outils fournis sous windows en powershell, ou même notepad++, mais surtout pour gérer via XSLT d'autres fichiers. Ce projet n'est pas pour tout de suite mais je sais qu'il va venir.
De plus, et là c'est quelques choses non des moindres, cette partie de projet a été validé, donc revenir en arrière est impensable. Mais encore une fois, j'entennds tout à fait votre argument .

Par contre votre remarque m'interpelle : j'avais appris (en BTS info... en 96) que javascript ne permettait pas l'écriture de fichiers (c'est d'ailleurs pour ca que je passe par ajax). SI je lis votre remarque à ce sujet (que j'ai peut être mal interprété), il serait possible en pure JS d'éditer un fichiers sur un serveur en direct ?
Pour revenir sur votre réponse, effectivement, je n'avais absolument pas compris et j'étais à mille lieues d'imaginer que le décodage se faisait de manière transparente (ah les années de codage PHP engendrent des méthodologies qu'on tente de réappliquer à JS)
j'ai déja vu des outils comme https://www.sandig.com/en/software/j...pt/sspxml.html mais honnêtement, même si j'ai gardé ca dans un coin de mon esprit, je n'en suis pas là.
Enfin, et cela est très important, bien que je sois informaticien de formation, je travaille là à un rôle de "documentaliste" (je gère une bibliotheque de documents PDF/DOC à mettre à disposition). Mon rôle premier est de garantir la bonne mise à disposition. Tout ce que je fais là (le coté DEV) est pour un confort utilisateur

Enfin, un grand merci pour votre aide

SL

**NoSmoking** · 19/04/2025, 11h15

Bonjour,
tant qu'à utiliser jQuery autant le faire en plein

Ancien mais toujours d'actualité donc : Lire un fichier XML avec jQuery

**slhuilli** · 19/04/2025, 11h27

Ah cool ca.
Merci pour le lien

**slhuilli** · 19/04/2025, 11h45

Nickel, j'ai juste les propriétés que j'arrive pas pour l'instant à récupérer mais ce n'est pas la majorité de mon fichier XML (je peux modifier mon XML )
Un grand merci
Faut que je teste la suite mais c'est un début prometteur, merci beaucoup

PS : alors oui je ne l'avais pas mentionné mais je le fait pour mes prochains lecteurs de notre discussion, après avoirr fait des tests, à priori la commande d'inclusion XML xi:include n'est pas fonctionnelle et je m'en passerai.

Envoyé par NoSmoking

Bonjour,
tant qu'à utiliser jQuery autant le faire en plein

Ancien mais toujours d'actualité donc : Lire un fichier XML avec jQuery

**mathieu** · 19/04/2025, 13h20

Envoyé par slhuilli

j'avais appris (en BTS info... en 96) que javascript ne permettait pas l'écriture de fichiers

c'est bien ça, la page html et javascript va s'occuper d'éditer les données et ensuite la page génère un fichier que vous devrez replacer sur le serveur.

j'ai mis un exemple à tester en pièce jointe de ce message. les étapes seraient les suivantes :

votre collègue ouvre la page qui va charger les données
votre collègue édite les valeurs
elle clique sur le bouton pour télécharger le nouveau fichier
elle vous envoie le nouveau fichier par e-mail
vous placez le fichier sur le serveur

il y a plusieurs avantages comme la syntaxe du fichier qui sera fiable. vous pourrez aussi faciliter l'édition par exemple en affichant un calendrier pour le choix d'une date et vous pourrez aussi vérifier directement la cohérence des données.
dans mon exemple, les données sont en json pour faire plus simple mais ça fonctionne de la même façon avec des données stockées en xml.

**slhuilli** · 19/04/2025, 19h41

bonsoir, je vais précieusement garder votre exemple.
Mais de mon coté j'ai pas mal réussi à avancer avec d'une part vos réponses mais aussi des infos picorées ici et là, je je suis pas mécontent de moi.
je ne peux pas tout partager ici car il y a des infos sensibles dans mes données, tout est sur mon serveur local. Et je ne peux pas dire que ce soit compliqué mais c'est une gymnastique d'esprit dont je n'ai pas l'habitude.
En revanche je m'interroge, notamment pour l'appel à JQuery est est actuellement sur un serveur en ligne, (alors que mon app sera sur un réseau déconnecté du net, faudra que je récupère la bibliothèque).J'ai juste à récupérer la bibliothèque ? (j'avais déja fait ce genre de manip pour des modules Joomla).

Mais ma plus grosse interrogation c'est "dois-je utiliser la version stricto sensus de JQuery (là je travaille avec la 3.1.0). Imaginons qu'une nouvelle version apparaisse, est on sûr et certain que la nouvelle soit 100% compatible avec mon code (et donc la 3.1.0) ?

Dans mes évolutions, je dois intégrer une photo de présentation et ultérieurement une galerie photos avvec des images mappées. A vrai dire je n'ai encore regardé mais finalement cela ne m'affole plus trop ce soir

Un grand merci

Chargement et lecture de XML dans JQuery

jQuery

Discussions similaires

Partager

Partager