Codage pour extraire les données d'un fichier XML par du HTML

**Douxnuts** · 30/12/2018, 10h52

Bonjour,

Je suis étudiante en Master 2. J'ai besoin de votre aide, nous avons un projet de groupe. Il s'agit d'extraire les données d'un fichier XML par du HTML. Dans le fichier XML nous avons plusieurs domaines de définitions, nous devons faire apparaître plusieurs boutons chacun ouvrant sur un domaine de définitions. Pour l'instant nous pouvons faire apparaître deux boutons cependant seul un tableau apparaît. Nous ne parvenons pas à trouver ce qu'il faudrait ajouter ou changer. Je vous remercie d'avance pour votre aide, qui nous serait très précieuse.

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
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
138
139
140
141
<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
 
<body>
 
<h1>The XMLHttpRequest Object</h1>
 
<button type="button" onclick="loadDoc()">Get Definitions legales</button>
<br><br>
<table id="definitionslegales"></table>
 
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "FranceTerme.xml", true);
  xhttp.send();
}
 
 
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Terme</th><th>Definition</th><th>Domaine</th></tr>";
  var x = xmlDoc.getElementsByTagName("Article");
  for (i = 0; i <x.length; i++) { 
   
 
  {
 
 
if ( x[i].getElementsByTagName("Dom")[0].childNodes[0].nodeValue == "Droit") 
 
 
    table += "<tr><td>" +
    x[i].getElementsByTagName("Terme_balise")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("Definition")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("Dom")[0].childNodes[0].nodeValue +
    "</td></tr>";
   
 
   else { continue }
 
  }
  
  
}
  document.getElementById("definitionslegales").innerHTML = table;
}
 
</script>
 
</body>
 
 
 
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
 
</style>
 
<body>
 
<h1>The XMLHttpRequest Object</h1>
 
<button type="button" onclick="loadDoc()">Get Definitions Acoustiques</button>
<br><br>
<table id="definitionsAcoustiques"></table>
 
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "FranceTerme.xml", true);
  xhttp.send();
}
 
 
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Terme</th><th>Definition</th><th>Domaine</th></tr>";
  var x = xmlDoc.getElementsByTagName("Article");
  for (i = 0; i <x.length; i++) { 
   
 
  {
 
 
if ( x[i].getElementsByTagName("Dom")[0].childNodes[0].nodeValue == "Acoustique") 
 
 
    table += "<tr><td>" +
    x[i].getElementsByTagName("Terme_balise")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("Definition")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("Dom")[0].childNodes[0].nodeValue +
    "</td></tr>";
   
 
   else { continue }
 
  }
  
  
}
  document.getElementById("definitionsAcoustiques").innerHTML = table;
}
 
</script>
 
</body>
 
 
</html>

**Beginner.** · 30/12/2018, 14h41

Bonjour,

Eh bien il y aurait beaucoup de choses à dire*...
Mais on ne peut pas tester car on n'a pas le fichier "FranceTerme.xml", il nous faudrait au moins un exemple pour tester et voir la structure...

Sinon je n'ai pas compris une chose les bottons il faut les ajouter automatiquement ou bien ils sont déjà présents dans la page ?

* Exemples :

- Pourquoi charger à chaque fois le même fichier "FranceTerme.xml" ?
- Il y a plusieurs fois la balise <body>

**Douxnuts** · 30/12/2018, 15h28

D'abord merci de votre réponse.

Ensuite mon fichier XML est trop volumineux pour que je l'importe.

Nous devons ajouter les boutons, et chaque bouton devrait renvoyer à une catégorie spécifique de définitions contenues dans le XML. Le problème est que nous avons deux boutons qui renvoies tous les deux aux mêmes définitions.

Mais le fichier XML est à cette adresse : https://www.data.gouv.fr/fr/datasets...1PSfTfuMX3UpJI

**tsuji** · 30/12/2018, 17h55

Ça semble un peu ridicule de mettre multiple body dans un page html... ne trouvez-vous pas ? Je fais des changements/remaniements minimalistes pour directement faire paraitre les résultats. Quant aux raffinements, c'est à vous de le faire.

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    table,th,td {
        border : 1px solid black;
        border-collapse: collapse;
    }
    th,td {
        padding: 5px;
    }
</style>
<script>
function loadDoc(nodevalue) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            //myFunction(this);
            //console.log(xhttp.responseText);    //pour le déboguer
            var xmlDoc=xhttp.responseXML;
            myFunction(xmlDoc, nodevalue);
        }
    };
    xhttp.open("GET", "FranceTerme.xml", true);
    xhttp.send();
}
 
function myFunction(xmlDoc, nodevalue) {
    var i;
    var table="<tr><th>Terme</th><th>Definition</th><th>Domaine</th></tr>";
    var x = xmlDoc.getElementsByTagName("Article");
    for (i = 0; i <x.length; i++) {
        if (x[i].getElementsByTagName("Dom")[0].childNodes[0].nodeValue == nodevalue)  {
            table += "<tr><td>" +
                x[i].getElementsByTagName("Terme_balise")[0].childNodes[0].nodeValue +
                "</td><td>" +
                x[i].getElementsByTagName("Definition")[0].childNodes[0].nodeValue +
                "</td><td>" +
                x[i].getElementsByTagName("Dom")[0].childNodes[0].nodeValue +
                "</td></tr>";
        } else { 
            continue;   //???
        }
    }
    console.log(table);    //pour déboguer
    if (nodevalue==='Droit') {
        document.getElementById("definitionslegales").innerHTML = table;
    } else if (nodevalue==='Acoustique') {
        document.getElementById("definitionsAcoustiques").innerHTML = table;
    }
}
</script>
</head>
<body>
<h1>The XMLHttpRequest Object</h1>
<!-- <button type="button" onclick="loadDoc()">Get Definitions legales</button> -->
<button type="button" onclick="loadDoc('Droit')">Get Definitions legales</button>
<br /><br />
<button type="button" onclick="loadDoc('Acoustique')">Get Definitions Acoustiques</button>
<br /><br />
<table id="definitionslegales"></table>
<table id="definitionsAcoustiques"></table>
</body>
</html>

Voilà; le reste, c'est à vous.

**Beginner.** · 30/12/2018, 18h22

Envoyé par Douxnuts

Nous devons ajouter les boutons, et chaque bouton devrait renvoyer à une catégorie spécifique de définitions contenues dans le XML. Le problème est que nous avons deux boutons qui renvoies tous les deux aux mêmes définitions.

Ok mais encore une fois : "Sinon je n'ai pas compris une chose les butons il faut les ajouter automatiquement ou bien ils sont déjà présents dans la page ?"
Oui parce que des domaines il y en a plusieurs alors si on met un bouton par domaine doit-on le faire manuellement ou bien vous voulez le faire à l'aide d'un code (c'est possible) ?

Ensuite il reste toujours le problème de charger à chaque fois le même fichier "FranceTerme.xml", une seule fois suffit...

Après votre code ne fonctionne pas parce que vous avez certaines choses en double : <body>, loadDoc() et myFunction()...

**Beginner.** · 30/12/2018, 18h36

@tsuji Oui ton code fonctionne mais c'est dommage de charger à chaque fois le même fichier "FranceTerme.xml", avec un petit test on pourrait ne le charger qu'une fois...

**Douxnuts** · 30/12/2018, 19h17

Merci de toutes vos réponses.

Les boutons doivent être ajoutés.

D'accord je vais suivre vos conseils, merci beaucoup !

Codage pour extraire les données d'un fichier XML par du HTML

JavaScript

Discussions similaires

Partager

Partager