Récupérer les informations d'un fichier XML

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour à tous,

Je souhaite récupérer les informations d'un document XML à l'aide d'un script (DOM), mon code me retourne l'erreur "xmlhttp is not defined".
Je ne suis pas programmeur à la base et il se peut que mon erreur soit une erreur de débutant. Je bloque depuis quelques jours dessus, essaye des choses trouvées sur le web mais ne trouve pas de solution.

Voici mon fichier XML:
Bra.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
<?xml version='1.0' ?>
<EL>    
     <BRANCHES>
          <BRA ID = "BRA0001">
               <SEGMENT>BNS0088</SEGMENT>
               <SEGMENT>BNS0090</SEGMENT>
               <SEGEXT>DER0001</SEGEXT>
               <SEGEXT>EXT0038</SEGEXT>
               <ASROUTEBR>11M</ASROUTEBR>
               <ENVIRONMENTS>
                    <ENVIRONMENTTYPE>PRESSURISED</ENVIRONMENTTYPE>
               </ENVIRONMENTS>
               <ROUTECODE>11M</ROUTECODE>
               <LENGTH>784.006</LENGTH>
               <DIAMETER>6.0</DIAMETER>
               <BENDRADIUS>18.0</BENDRADIUS>
               <BRA_GEOM>
                    <INFO3D_COORD>
                         <Point X = "12856.940" Y = "-2809.882" Z = "-116.364"/>
                         <Vector X = "-0.17955" Y = "-0.69185" Z = "0.69936"/>
                    </INFO3D_COORD>
                    <INFO3D_COORD>
                         <Point X = "12840.315" Y = "-2851.720" Z = "-55.351"/>
                         <Vector X = "-0.28422" Y = "-0.14765" Z = "0.94732"/>
                    </INFO3D_COORD>
                    <INFO3D_COORD>
                         <Point X = "12836.622" Y = "-2853.641" Z = "-43.036"/>
                         <Vector X = "-0.28383" Y = "-0.14802" Z = "0.94738"/>
                    </INFO3D_COORD>
                    <INFO3D_COORD>
                         <Point X = "12882.119" Y = "-2894.158" Z = "121.646"/>
                         <Vector X = "1.00000" Y = "0.00002" Z = "-0.00003"/>
                    </INFO3D_COORD>
                    <MIDDLE_POINT>
                         <Point X = "12967.780" Y = "-2886.374" Z = "83.137"/>
                    </MIDDLE_POINT>
               </BRA_GEOM>
          </BRA>
     </BRANCHES>
</EL>

Et voici mon code js:
Bra.js

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
var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
};
xmlhttp.open("GET", "Bra.xml", true);
xmlhttp.send();
 
function myFunction(xml) {
    var x, y, i, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.documentElement;
    y = xmlDoc.documentElement.childNodes;
    for(i = 0; i < y.length; i++) {
        if (y[i].nodeType != 3 && y[i].nodeType != 9) {
            txt += "Nodename: " + y[i].nodeName +
            " (value: " + y[i].childNodes[0].nodeValue + ")<br>";
        }
        for(z = 0; z < y[i].childNodes.length; z++) {
            if (y[i].childNodes[z].nodeType != 3) {
                txt += "Nodename: " + y[i].childNodes[z].nodeName +
                " (value: " + y[i].childNodes[z].childNodes[0].nodeValue + ")<br>";
            }
        }
    }
    document.getElementById("Bra").innerHTML = 
    "Nodename: " + xmlDoc.nodeName +
    " (value: " + xmlDoc.childNodes[0].nodeValue + ")<br>" +
    "Nodename: " + x.nodeName + 
    " (value: " + x.childNodes[0].nodeValue + ")<br>" +
    txt;
}

Merci d'avance pour vos réponses.
Cordialement

26/02/2019, 09h53
NoSmoking

Bonjour,

Citation:

(...)mon code me retourne l'erreur "xmlhttp is not defined".

avec le code que tu nous montres tu ne devrais pas avoir cette erreur, sauf si tu utilises un « very old navigateur » !?!

1 pièce(s) jointe(s)

Bonjour,
Après de longues recherches essais et autres je pense avoir déterminé la source de mon problème.

Merci pour ta réponse, cela aurait pu être en effet une cause mais à priori c'est tout autre.

Citation:

Citation:

(...)mon code me retourne l'erreur "xmlhttp is not defined".

avec le code que tu nous montres tu ne devrais pas avoir cette erreur, sauf si tu utilises un « very old navigateur » !?!

Pour te répondre, non j'utilise la dernière version de chrome mais le problème ne vient pas du navigateur de ce que j'ai pu comprendre. (Pour la blague je dirais même qu'il se situe entre la chaise et le clavier).

Ce que j'essaie de faire c'est de récupérer les données d'une ressource en local alors que la fonction "xmlhttp" ne permet pas ça, il va donc falloir que je trouve une autre fonction pour lire un fichier local.
Ais-je bien compris ou cela vient d'un autre problème?
Si ce problème est bien lié à ça, pensez-vous que je suisse continuer à utiliser le reste de mon script ou dois-je chercherune autre façon de le faire pour intervenir sur mes ressources en local?

EDIT:

Je viens de créer un fichier html pour essayer de régler mon problème, celui-ci aussi est en local.
Lorsque je le lance j'ai ma page qui s'ouvre mais malheureusement qui reste totalement blanche. Est-ce lié à mon problème précédent ou une erreur de code?

fichier html:
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 <!DOCTYPE html> <html> <body> <p id="Bra"></p> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xmlhttp.open("GET", "Bra.xml", true); xmlhttp.send(); } function myFunction(xml) { var x, y, i, xmlDoc, txt; xmlDoc = xml.responseXML; txt = ""; x = xmlDoc.documentElement; y = xmlDoc.documentElement.childNodes; for(i = 0; i < y.length; i++) { if (y[i].nodeType != 3 && y[i].nodeType != 9) { txt += "Nodename: " + y[i].nodeName + " (value: " + y[i].childNodes[0].nodeValue + ")<br>"; } for(z = 0; z < y[i].childNodes.length; z++) { if (y[i].childNodes[z].nodeType != 3) { txt += "Nodename: " + y[i].childNodes[z].nodeName + " (value: " + y[i].childNodes[z].childNodes[0].nodeValue + ")<br>"; } } } document.getElementById("Bra").innerHTML = "Nodename: " + xmlDoc.nodeName + " (value: " + xmlDoc.childNodes[0].nodeValue + ")<br>" + "Nodename: " + x.nodeName + " (value: " + x.childNodes[0].nodeValue + ")<br>" + txt; } </script> </body> </html>
voici le résultat:
Pièce jointe 453178

Merci

26/02/2019, 13h54
Pal31

Je viens de repenser ma solution, comme je n'avais pas pris en compte le fait que javascript a besoin d'un serveur pour récupérer les fichiers, infos etc...
Je compte mettre en place un serveur, pensez-vous que ça pourrait me permettre de régler mes problèmes?

Merci d'avance
26/02/2019, 16h18
NoSmoking

Citation:

Je compte mettre en place un serveur, pensez-vous que ça pourrait me permettre de régler mes problèmes?

vaec un serveur local pas de soucis, tu peux également soit tester sur un navigateur qui supporte/accepte cela soit encore lancer Chrome avec comme paramètre --allow-file-access-from-files.
26/02/2019, 16h33
Pal31

Citation:

(...) tu peux également soit tester sur un navigateur qui supporte/accepte cela soit encore lancer Chrome avec comme paramètre --allow-file-access-from-files.

Merci pour ta réponse, j'ai pu faire un pas en avant sans avoir à créer de serveur, maintenant j'ai une page totalement blanche qui s'ouvre donc à priori cela viendrait d'une erreur dans mon code, si quelqu'un a une idée? Je vais continuer de chercher de mon côté aussi bien entendu.

Merci à tous
26/02/2019, 16h38
NoSmoking

:koi: quand appelles tu la fonction loadXMLDoc ?

Ah en effet, je ne l'appelle pas, mais ais-je vraiment besoin de la créer du coup cette fonction ne puis-je pas simplement faire:

Code:

1
2
3
4
5
6
7
8
9
10
11
(...)
    <script>
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                myFunction(this);
            };
        xmlhttp.open("GET", "Bra.xml", true);
        xmlhttp.send();
        }
(...)

plutôt que :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 (...)
    <script>
        function loadXMLDoc() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                myFunction(this);
                }
            };
        xmlhttp.open("GET", "Bra.xml", true);
        xmlhttp.send();
        }
(...)

Après, sinon je vous avoue que je ne sais pas du tout à quel moment l'appeler :roll:

Citation:

mais ais-je vraiment besoin de la créer du coup cette fonction ne puis-je pas simplement faire

oui cela est suffisant dans ce cas.

Citation:

Après, sinon je vous avoue que je ne sais pas du tout à quel moment l'appeler

exactement au même endroit que ton post #3, en supprimant la notion de fonction

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
<!DOCTYPE html>
<html>
<body>
    <p id="Bra"></p>
<script>
// déclaration fonction utilisée
function myFunction(xml) {
  var x, y, i, xmlDoc, txt;
  xmlDoc = xml.responseXML;
  txt = "";
  x = xmlDoc.documentElement;
  y = xmlDoc.documentElement.childNodes;
  for (i = 0; i < y.length; i++) {
    if (y[i].nodeType != 3 && y[i].nodeType != 9) {
      txt += "Nodename: " + y[i].nodeName +
        " (value: " + y[i].childNodes[0].nodeValue + ")<br>";
    }
    for (z = 0; z < y[i].childNodes.length; z++) {
      if (y[i].childNodes[z].nodeType != 3) {
        txt += "Nodename: " + y[i].childNodes[z].nodeName +
          " (value: " + y[i].childNodes[z].childNodes[0].nodeValue + ")<br>";
      }
    }
  }
  document.getElementById("Bra").innerHTML =
    "Nodename: " + xmlDoc.nodeName +
    " (value: " + xmlDoc.childNodes[0].nodeValue + ")<br>" +
    "Nodename: " + x.nodeName +
    " (value: " + x.childNodes[0].nodeValue + ")<br>" +
    txt;
}
// exécution du code
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
  }
};
xmlhttp.open("GET", "Bra.xml", true);
xmlhttp.send();
</script>
</body>
</html>

28/02/2019, 09h49
Pal31

1 pièce(s) jointe(s)

Bonjour,

Je suis en train de reprendre l'analyse de mon code afin de trouver pourquoi ma page html qui s’exécute reste vide au lieu de m'afficher les données voulues.
Pièce jointe 453803
N'étant pas développeur à la base, j'apprends sur le tas et vos réponses m'ont déjà été d'une aide précieuse pour comprendre certaines de mes erreurs, merci beaucoup.

1 pièce(s) jointe(s)

Finalement j'ai opté pour mettre mes fichiers sur un serveur n'arrivant pas à me dépatouiller en local.
Quoi qu'il en soit vos réponses m'ont permis d'obtenir de premiers résultats! Merci beaucoup!
J'arrive enfin à récupérer des informations, seulement je n'ai que le nœud child de premier niveau qui est récupéré.
Je vous remets le code du fichier xml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version='1.0' ?>
<EL>    
     <BRANCHES>
          <BRA ID = "BRA0001">
               <SEGMENT>BNS0088</SEGMENT>
               <SEGMENT>BNS0090</SEGMENT>
               <ENVIRONMENTS>
                    <ENVIRONMENTTYPE>PRESSURISED</ENVIRONMENTTYPE>
               </ENVIRONMENTS>
          </BRA>
     </BRANCHES>
</EL>

et celui du script du fichier html:

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
<!DOCTYPE html>
<html>
<body>
    <p id="El"></p>
<script>
// déclaration fonction utilisée
function myFunction(xml) {
    var x, y, i, z, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.documentElement;
    y = xmlDoc.documentElement.childNodes;
    for(i = 0; i < y.length; i++) {
        if (y[i].nodeType != 3) {
            txt += "Nodename: " + y[i].nodeName +
            " (value: " + y[i].childNodes[0].nodeValue + ")<br>";
        }
        for(z = 0; z < y[z].childNodes.length; z++) {
            if (y[z].childNodes[z].nodeType != 3) {
                txt += "Nodename: " + y[z].childNodes[z].nodeName +
                " (value: " + y[z].childNodes[z].childNodes[0].nodeValue + ")<br>";
            }
        }
}
    document.getElementById("El").innerHTML = 
    "Nodename: " + xmlDoc.nodeName +
    " (value: " + xmlDoc.childNodes[0].nodeValue + ")<br>" +
    "Nodename: " + x.nodeName + 
    " (value: " + x.childNodes[0].nodeValue + ")<br>" +
    txt;
};
// exécution du code
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
  }
};
xmlhttp.open("GET", "Bra.xml", false);
xmlhttp.send();
</script>
</body>
</html>

et enfin le résultat récupéré:
Pièce jointe 453835

On peut donc constater que je récupère bien mes noeuds
- EL
- BRANCHES

Cependant je ne récupère pas les noeuds de niveaux inférieurs:
- BRA
- SEGMENT
- SEGMENT
- ENVIRONMENTS
- ENVIRONMENTTYPE

Si quelqu'un a une idée je suis preneur.

Merci d'avance.

Citation:

Finalement j'ai opté pour mettre mes fichiers sur un serveur n'arrivant pas à me dépatouiller en local.

Pour commencer je te propose de remplacer ton code de récupération des données par celui-ci
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var url = "Bra.xml"; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (4 === this.readyState) { /* DONE */ if (200 === this.status) { /* LOADING */ myFunction(this); } else { console.warn("Erreur %d lors du chargement du fichier %s !", this.status, url); } } }; xmlhttp.open("GET", url, true); xmlhttp.send();
de sorte que lorsque tu débogueras avec la console, F12, tu y verras peut-être plus clair.

Concernant la lecture des données il te suffit d'utiliser la méthode querySelectorAll( selector) pour récupérer les éléments qui t'intéressent quitte à mettre en place un boucle.
Code:

1 2 3 4 var docXML = xmlDoc.documentElement; // récup. tous les éléments BRANCHES var oBranches = docXML.querySelectorAll("BRANCHES"); // etc
Citation:

Cependant je ne récupère pas les noeuds de niveaux inférieurs:

Suivant ce que tu cherches à faire tu peux également mettre en place une fonction récursive.

28/02/2019, 16h08
Pal31

Merci pour le code de récupération des données.
Pour ce qui est de la méthode querySelectorAll(selector), je n'y avais pas pensé mais en lisant la doc j'ai pu voir qu'il s'agissait d'une fonction pour les documents html. Je travaille sur les nœuds d'un document xml pour ma part.
Je ne pense pas que ça puisse fonctionner comme je le souhaite, sachant que je cherche à faire une récupération générique des informations avec plus d'une centaine de valeurs différentes.

Peut-être ais-je mal compris comment utiliser la fonction et que celle-ci pourrait répondre à mon besoin, mais à ce moment là je n'ai pas compris non plus l'affichage des données récupérées.

Quoi qu'il en soit merci pour toutes ces pistes à étudier au fur et à mesure.
01/03/2019, 18h44
NoSmoking

Citation:

Pour ce qui est de la méthode querySelectorAll(selector), je n'y avais pas pensé mais en lisant la doc j'ai pu voir qu'il s'agissait d'une fonction pour les documents html. Je travaille sur les nœuds d'un document xml pour ma part.

Ta première devise devrait être « toujours tester pour voir »

Code:

console.log( xmlDoc.querySelectorAll("Vector"));

fonctionne même avec IE :mrgreen:

Citation:

mais à ce moment là je n'ai pas compris non plus l'affichage des données récupérées.

Tu ne parcours pas l'ensemble de l'arborescence de ton document XML mais que les premiers éléments.

Si tu veux parcourir l'arbre complet il te faut faire une fonction récursive ou faire un xmlDoc.querySelectorAll("*") pour récupérer tous les noeuds de ton arbre XML.
01/03/2019, 20h09
Pal31

Merci, pour la réponse, en effet je ne l'ai pas testé (je vais en faire ma devise :D ).
J'essayerai ça au boulot lundi.
Bon week-end à vous!

2 pièce(s) jointe(s)

Bonjour à tous,
Je n'ai pas réussi à faire ce que je voulais avec la fonction

Code:

console.log( xmlDoc.querySelectorAll("Vector"));

Cependant, j'ai réussi à récupérer tous les noeuds du document XML.

Je remets le document XML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version='1.0' ?>
<EL>    
     <BRANCHES>
          <BRA ID = "BRA0001">
               <SEGMENT>BNS0088</SEGMENT>
               <SEGMENT>BNS0090</SEGMENT>
               <ENVIRONMENTS>
                    <ENVIRONMENTTYPE>PRESSURISED</ENVIRONMENTTYPE>
               </ENVIRONMENTS>
          </BRA>
     </BRANCHES>
</EL>

et voici le script HTML:

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
<html>
<body>
 
<p id="El"></p>
 
<script>
function myFunction(xml) {
    var parser, xmlDoc;
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(xml.responseText,"text/xml");
    document.getElementById("El").innerHTML =
    myLoop(xmlDoc.documentElement);
};
 
function myLoop(x) {
    var x, i, y, xLen, txt;
  
    txt = "";
    x = x.childNodes;
    xLen = x.length;
 
    for (i = 0; i < xLen ;i++) {
        y = x[i];
        
        if (x.item(i).nodeType != 3) {
                
            txt += x.item(i).nodeName + "<br>" + "<br>";
//            txt += " (value: " + x.item(i).textContent + ")<br>" + "<br>";
            txt += myLoop(y);
        }
    }
    return txt;
};
 
var url = "Bra.xml";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (4 === this.readyState) {  /* DONE */
        if (200 === this.status) {  /* LOADING */
            myFunction(this);
        }
        else {
            console.warn("Erreur %d lors du chargement du fichier %s !", this.status, url);
        }
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
 
</body>
</html>

et enfin le résultat obtenu:
Pièce jointe 454684

J'ai un petit problème cependant, c'est pour la récupération des valeurs:

Lorsque j'enlève le commentaire sur la ligne

Code:

// txt += " (value: " + x.item(i).textContent + ")<br>" + "<br>";

Je récupère bien mes valeurs, mais pour les nœuds parents je récupère toutes les valeurs des nœuds enfants dedans:

Pièce jointe 454690

Je vais continuer à chercher et vous tiendrai au courant lorsque j'aurai une solution ou si la solution proposée par l'un de vous fonctionne.
Merci d'avance

Si ton but est de récupérer les différentes données présentes dans ton fichier XML, et pour peu que tu saches exactement lesquelles la méthode via querySelectorAll devrait faire l'affaire.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function fctCallBack(xml) {
  var xmlDoc = xml.responseXML;
  var nodeVectors = xmlDoc.querySelectorAll("Vector");
  for (var i = 0; i < nodeVectors.length; i += 1) {
    var obj = {};
    var attrs = nodeVectors[i].attributes;
    for (var item = 0; item < attrs.length; item += 1) {
      obj[attrs[item].name] = attrs[item].value;
    }
    console.log(obj);
  }
}

après à toi de mettre en oeuvre les boucles qui vont bien.

Concernant ta façon de « traverser » le document XML il semblerait qu'il te manque des prises en compte.

Je te mets un exemple avec une fonction récursive de lecture, adaptée rapidement, pour tes données.

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Lecture arborescence fichier XML</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1946638">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana,sans-serif;
}
main {
  display: block;
  margin: 0 auto;
  padding: 0;
  max-width: 60em;
}
h1, h2, h3 {
  margin: .5em 0;
  color: #069;
}
pre {
  margin: 0 0 .5em;
  border: 1px solid #CCC;  
  text-shadow: 1px 1px 0 #FFF;
  background: #EEE;
}
</style>
</head>
<body>
<main>
  <h1>Résultat récursif</h1>
  <pre id="result"></pre>
</main>
<script>
"use strict";
var url = "data-XML.xml";       // mettre ici ton url
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (4 === this.readyState) {  /* DONE */
    if (200 === this.status) {  /* LOADING */
      fctCallBack(this);
    }
    else {
      console.warn("Erreur %d lors du chargement du fichier %s !", this.status, url);
    }
  }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
 
function getChildren(elem, indent) {
  /* si utilisé avec innerHTML
  var TAB = "&nbsp;&nbsp;";
  var CR =  "<br>";
  var LT =  "&lt;";
  */
  /* si utilisé avec textContent */
  var TAB = "  ";
  var CR =  "\n";
  var LT =  "<";
  
  var retour = "";
  var children = elem.childNodes;
  var nbChildren = children.length;
  var child;
  var i;
  indent += TAB;
  for (i = 0; i < nbChildren; i += 1) {
    child = children[i];
    // si élément est de type ELEMENT_NODE
    if (1 === child.nodeType) {
      // si des enfants
      if (child.childElementCount) {
        // prise en compte du tagName
        retour += indent + LT + child.tagName + ">" + CR;
        // on y retourne pour la suite
        retour += getChildren(child, indent);
      }
      else {
        // rédup. attributes si existent pour affichage
        if (child.hasAttributes()) {
          var attrs = child.attributes;
          var item;
          var text = [];
          for (item = 0; item < attrs.length; item += 1) {
            text.push(attrs[item].name + " = " + attrs[item].value);
          }
          child.textContent = text.join(", ");
        }
        retour += indent + LT + child.tagName + "> " + child.textContent + CR;
      }
    }
    else { /* on ne fait rien */ }
  }
  // fin balise si existe
  var endTag = elem.tagName ? (indent.substring(TAB.length) + LT +"/" + elem.tagName + ">" + CR) : "";
  return retour + endTag;
}
 
function fctCallBack(xml) {
  var xmlDoc = xml.responseXML;
  var text = getChildren(xmlDoc, "");
  document.getElementById("result").textContent = text;
}
</script>
</body>
</html>

04/03/2019, 17h21
Pal31

Tout d'abord je tiens à vous remercier pour votre contribution. En effet votre solution est bien plus efficace et complète que la mienne.
Je vous remercie aussi de ne pas m'avoir fourni un script complet directement car mes recherches m'ont beaucoup appris.

Maintenant je vais pouvoir jouer sur l'affichage de mes données et les transformer comme je le souhaite en utilisant les fonctions que vous m'avez fournies plus celles de mes recherches.

Je passe la discussion en résolu.

Bonne continuation à tous et peut-être à bientôt sur un autre sujet.
Merci encore!

Cordialement

Pal31
04/03/2019, 17h27
NoSmoking

Citation:

e vous remercie aussi de ne pas m'avoir fourni un script complet directement car mes recherches m'ont beaucoup appris.

Merci pour ce retour, c'est cela le but du forum ;)

Rebonjour,
J'ai de nouveaux besoins (sinon ce n'est pas drôle).
Je cherche à mettre un identifiant unique à chaque nœud récupéré dans mon document XML et à pouvoir les récupérer.

Je vous reposte le code de NoSmoking adapté à mes besoins:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Lecture arborescence fichier XML</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1946638">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana,sans-serif;
}
main {
  display: block;
  margin: 0 auto;
  padding: 0;
  max-width: 60em;
}
h1, h2, h3 {
  margin: .5em 0;
  color: #069;
}
pre {
  margin: 0 0 .5em;
  border: 1px solid #CCC;  
  text-shadow: 1px 1px 0 #FFF;
  background: #EEE;
}
</style>
</head>
<body>
<main>
  <h1>Résultat récursif</h1>
  <pre id="result"></pre>
</main>
<script>
        "use strict";
        var url = "Bra.xml";
        var xmlhttp = new XMLHttpRequest();
        
                xmlhttp.onreadystatechange = function() {
                        if (4 === this.readyState) {  /* DONE */
                                if (200 === this.status) {  /* LOADING */
                                        fctCallBack(this);
                                } else {
                                        console.warn("Erreur %d lors du chargement du fichier %s !", this.status, url);
                                }
                        }
        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
         
        function getChildren(elem, indent) {
          /* si utilisé avec innerHTML
          var TAB = "&nbsp;&nbsp;";
          var CR =  "<br>";
          var LT =  "&lt;";
          */
          /* si utilisé avec textContent */
                        var TAB = "  ";
                        var CR =  "\n";
                        var LT =  '"';
            
            
                        var retour = "";
                        var children = elem.childNodes;
                        var nbChildren = children.length;
                        var child;
                        var i;
                        indent += TAB;
                    
                    
                    var x = "ID";    //Je voudrais mettre mon Identifiant dans cette variable
                    
                        
                        
                        for (i = 0; i < nbChildren; i += 1) {
                            
                                child = children[i];
 
 
                                // si élément est de type ELEMENT_NODE
                                if (1 === child.nodeType) {
                                    
                                // si des enfants
                                        if (child.childElementCount) {
                                        // prise en compte du tagName
                   
                                                retour += "<node id=" + LT + x + LT + " " + "label=" + LT + child.tagName + LT + ">" + CR;
                                                retour += "</node>" + CR;
 
 
                                        // on y retourne pour la suite
 
                                        retour += getChildren(child, indent, x);
                                        } else {
                                        // rédup. attributes si existent pour affichage
                                                if (child.hasAttributes()) {
                                                        var attrs = child.attributes;
                                                        var item;
                                                        var text = [];
                                                        
                                                        
                                                        for (item = 0; item < attrs.length; item += 1) {
 
                                                                text.push(attrs[item].name + " = " + attrs[item].value);
 
                                                        }
                                                child.textContent = text.join(", ");
 
                                                }
 
 
                                                retour += "<node id="  + LT + x + LT + " " + "label="  + LT + child.tagName  + LT + ">" + CR
                                                retour += indent + "<attvalues>" + CR;
                                                retour += indent + indent + "<attvalue for="  + LT  +"0"  + LT + " " + "value="  + LT + child.textContent  + LT + "/>" + CR;
                                                retour += indent + "</attvalues>" + CR;
                                                retour += "</node>" + CR;
 
                                        }
                                }
                                else { /* on ne fait rien */ }
                        } 
                        // fin balise si existe
                        //var endTag = elem.tagName ? (indent.substring(TAB.length) + LT +"/" + elem.tagName + ">" + CR) : "";
                        return retour;
        }
         
        function fctCallBack(xml) {
                        var xmlDoc = xml.responseXML;
                        var text = getChildren(xmlDoc, "");
                        document.getElementById("result").textContent = text;
        }
</script>
</body>
</html>

Et cela me donne ce résultat:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<node id="ID" label="EL">
</node>
<node id="ID" label="BRANCHES">
</node>
<node id="ID" label="BRA">
</node>
<node id="ID" label="SEGMENT">
        <attvalues>
                <attvalue for="0" value="BNS0088"/>
        </attvalues>
</node>
<node id="ID" label="SEGMENT">
        <attvalues>
                <attvalue for="0" value="BNS0090"/>
        </attvalues>
</node>
<node id="ID" label="ENVIRONMENTS">
</node>
<node id="ID" label="ENVIRONMENTTYPE">
          <attvalues>
                    <attvalue for="0" value="PRESSURISED"/>
          </attvalues>
</node>

J'ai essayé d'initier ma variable "x" à 0 et de faire un incrément pour chaque nœud, mais il redémarre à 0 à chaque nouveau nœud de niveau supérieur.
Et j'ai essayé plusieurs fonctions, mais je me suis un peu perdu en route et n'obtenais plus aucun résultats.

ÉDIT:

Je vous poste mon objectif final afin que vous compreniez la finalité de mon projet:
L'objectif est à partir de mon fichier xml, créer un document au format .gexf à importer dans un logiciel de visualisation gephi) des nœuds et des liens entre ces nœuds.

Voici le code final (tapé à la main) que je souhaiterais obtenir automatiquement grâce à mon script.

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
<?xml version="1.0" encoding="UTF-8"?>
<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd" version="1.2">
    <graph defaultedgetype="directed">
 
		<attributes class="node">
                        <attribute id="0" title="Value" type="string"/>
			<default>true</default>
		</attributes>
 
		 <nodes>
			<node id="1" label="EL">  // "ID" serait remplacé par l'identifiant du nœud
                        </node>
			<node id="2" label="BRANCHES">
                        </node>
			<node id="3" label="BRA">
                        </node>
			<node id="4" label="SEGMENT">
					<attvalues>
							<attvalue for="0" value="BNS0088"/>
					</attvalues>
			</node>
			<node id="5" label="SEGMENT">
					<attvalues>
							<attvalue for="0" value="BNS0090"/>
					</attvalues>
			</node>
			<node id="6" label="ENVIRONMENTS">
                        </node>
			<node id="7" label="ENVIRONMENTTYPE">
					  <attvalues>
								<attvalue for="0" value="PRESSURISED"/>
					  </attvalues>
			</node>
		</nodes>
 
                <edges>	
                        <edge id="1" source="1" target="2"/>
			<edge id="2" source="2" target="3"/>
			<edge id="3" source="3" target="4"/>
			<edge id="4" source="3" target="5"/>
			<edge id="5" source="3" target="6"/>
			<edge id="6" source="6" target="7"/>
		</edges>
    </graph>
</gexf>

Merci d'avance

Voir 40 message(s) de cette discussion en une page