Récupérer et intégrer du XML dans une page HTML

Version imprimable

Bonjour, je suis entrain de créer un site pour mon boulot.
Je suis pour l'instant en local.

J'ai un fichier XML (un tableau) et j'aimerais l'intégrer à une de mes pages web. J'ai essayé plusieurs solutions proposées sur internet mais rien n'y fais, impossible d'afficher mon tableau XML sur ma page web.
J'espérais que vous pourriez m'aider, voici le code 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
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
<?xml version="1.0"?>
 
-<forbiddenlinks>
<lastupdate>last update: 2018/07/19 04:01:42</lastupdate>
-<table cellspacing="3" cellpadding="4">
 
-<tr>
<td> </td>
</tr>
</table>
 
-<section>
<title>Forbidden Links Section Title</title>
 
-<table cellspacing="3" cellpadding="4" border="1">
 
-<tr>
<th>From Bundle Name</th>
<th>From Bundle Rank</th>
<th>From Class</th>
<th>To Class</th>
<th>To Bundle Name</th>
<th>To Bundle Rank</th>
<th>Link Type</th>
</tr>
 
 
-<tr>
<td>OcsArchi</td>
<td>0</td>
<td>aOcsDeletedEntity</td>
<td>OcsPersonaliserInfo</td>
<td>OcsCardsArchi</td>
<td>5</td>
 
<td>myUses</td>
 
</tr>
 
-<tr>
<td>OcsCardsArchi</td>
<td>5</td>
<td>aOcsFeatureParameterChoice</td>
<td>aOcsMobileKeySet</td>
<td>OcsMobCardsApps</td>
<td>8</td>
<td>myUses</td>
</tr>
 
 
-<tr>
<td>OcsCardsArchi</td>
<td>5</td>
<td>aOcsFeatureParameterChoice</td>
<td>aOcsMobileICCardImage</td>
<td>OcsMobCardsApps</td>
<td>8</td>
<td>myUses</td>
</tr>
 
 
-<tr>
<td>OcsCardsArchi</td>
<td>5</td>
<td>aOcsAPDURegressionLog</td>
<td>OcsRegressionTraceLog</td>
<td>OcsCardAnalyseTools</td>
<td>16</td>
<td>myUses</td>
</tr>
 
 
-<tr>
<td>OcsMobCardsApps</td>
<td>8</td>
<td>aOcsMobileICCardImage</td>
<td>aOcsMobileEmbeddedProfileApplicationImage</td>
<td>OcsMobileCards</td>
<td>12</td>
<td>myUses</td>
</tr>
 
 
-<tr>
<td>OcsMobCardsApps</td>
<td>8</td>
<td>aOcsAPDUMobileRegressionLog</td>
<td>OcsRegressionTraceLog</td>
<td>OcsCardAnalyseTools</td>
<td>16</td>
<td>myUses</td>
</tr>
 
</table>
 
-<table cellspacing="3" cellpadding="4">
-<tr>
<td> </td>
</tr>
</table>
 
-<table cellspacing="3" cellpadding="4" border="1">
 
-<tr>
<th>Analysis</th>
<th/>
</tr>
 
 
-<tr>
<td>Total Number of bundles that do not close = </td>
<td>3</td>
</tr>
 
 
-<tr>
<td>Total Number of forbidden links = </td>
<td>6</td>
</tr>
</table>
</section>
 
</forbiddenlinks>

Je ne connais pas bien javascript, ajax ou jquery, je ne sais donc pas comment je peux faire. Merci beaucoup pour votre future aide.

19/03/2019, 22h42
psychadelic

Si structurellement parlant le html et le xml soient proches, il n’esiste aucun moyen magique pour intégrer directement du xml dans une page html.

Soit tu génère ta page HTML depuis le serveur avec une transformation xslt, ou encore via un script PHP, etc, suivant la ou les technos dispo sur le serveur
Soit tu en passe par du JS, possiblement avec de l’ajax, possiblement en jQuery.

Donc, si la question est juste d’avoir une douzaine de ligne de code en JS ou en PHP, ou en langage X, genre les écrire sur un coin de table entre 2 cafés…
Ben, ça va pas le faire, en tout cas pas avec le peu d’info que tu donnes ici, d’ailleurs, à vu de nez ça va demander pas mal de coins de table
30/03/2019, 15h40
psychadelic

pourquoi je réponds ?, visiblement MaxLikeMilf récupère ou non sa réponse sans ce soucier de l'aide apportée..:roll:
01/04/2019, 10h50
MaxLikeMilf

Bonjour,

Désolé j'avais complètement oublié mon post. Je vais essayer de voir avec jquery ce que je peux faire.
Merci de ta réponse :)
01/04/2019, 11h37
MaxLikeMilf

Du coup j'ai regardé un peu sur internet les manières d'insérer un tableau d'un XML sur du HTML. J'ai vu JQUERY, AJAX ect.... mais je ne comprends pas vraiment comment faire.
J'ai déjà un fichier XML avec les <td> <tr> ect, je veux juste implanter cela dans du HTML pour que mon tableau apparaisse sur ma page web.

J'ai besoin d'un peu d'aide, merci d'avance <3

en espérant que cette fois j'aurais un retour (même s'il est succin)

Sinon, je fais plus de jQuery, je suis passé à ES6, et passer de l'un à l'autre me fait des noeuds dans le cerveau.

Donc voici une solution vite fait en JS ( testée)

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>insertion données XML</title>
  <style>
    caption { padding: 10px; caption-side: bottom; font-weight: bold; }
    table {
        border-collapse: collapse;
        border: 2px solid #c8c8c8;
        letter-spacing: 1px;
        font-family: sans-serif;
        font-size: .8rem;
    }
    td, th { border: 1px solid #bebebe; padding: 7px 5px; }
    thead td { background-color: #ebebeb;  }
    tbody td { text-align: center; }
  </style>
</head>
 
<body>
  <p><button id="Bt-Lecture">lecture XML</button></p>
 
  <table id="from-XML">
      <caption></caption>
      <thead></thead>
      <tbody></tbody>
    </table>
 
  <script>
 
    const 
      refFileXML     = 'tC.xml',          //  url relatif du fichier xml
      c_TableCaption = document.querySelector('#from-XML caption'),
      c_TableHead    = document.querySelector('#from-XML thead'),
      c_TableBody    = document.querySelector('#from-XML tbody')
    ;
 
    document.querySelector('#Bt-Lecture').onclick = function()
    {
      let
        xhr = new XMLHttpRequest();
 
      xhr.open("GET", refFileXML, true); 
 
      xhr.responseType = 'document';
      xhr.overrideMimeType('text/xml');
 
      xhr.onload = function () {
 
        c_TableCaption.textContent = xhr.responseXML.querySelector('section title').textContent;
 
        xhr.responseXML.querySelector('section table').querySelectorAll('tr').forEach(ligneTR=>{
 
          let
            n_Cells   = ligneTR.querySelectorAll('th,td'),
            TablePart = n_Cells[0].tagName.match('th') ? c_TableHead : c_TableBody,
            row       = TablePart.insertRow(-1)
          ;
 
          n_Cells.forEach( (xCell,noCol)=>{
            row.insertCell(noCol).textContent = xCell.textContent;
          })
 
        }) // forEach(ligneTR
      };
      
      xhr.onerror = function () {
        return reject(xhr.statusText);
      };
 
      xhr.send(null);
 
    } // #Bt-Lecture').onclick
 
  </script>
</body>
</html>

01/04/2019, 16h11
MaxLikeMilf

Merci beaucoup de ton aide.
Quand je clique sur le bouton pour accéder à mes données. Çà ne fonctionne pas. J'ai cette erreur:

Citation:

ForbiddenLinks.html:72 Access to XMLHttpRequest at 'file://frpavserv1206/c$/inetpub/wwwroot/MaxTest/ForbiddenLinks.xml' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

document.querySelector.onclick @ ForbiddenLinks.html:72
ForbiddenLinks.html:69 Uncaught ReferenceError: reject is not defined
at XMLHttpRequest.xhr.onerror (ForbiddenLinks.html:69)
at HTMLButtonElement.document.querySelector.onclick (ForbiddenLinks.html:72)

L'erreur provient de la console google chrome. Dans Internet Explorer, cela ne m'affiche aucune erreur mais cela ne fonctionne toujours pas.
Je ne sais pas d'ou ça provient, mon fichier XML et HTML sont sur un serveur donc pas de problème au niveau des répertoires, les deux fichier sont au même endroit, j'ai bien modifié le nom du fichier xml dans le code.... je ne sais pas
01/04/2019, 17h47
psychadelic

essaie déjà mon code en local sur ta propre machine, et avec FireFox , car il accepte les requêtes ajax en local.

Pour les problèmes CORS, c'est une autre histoire, j'ai jamais réussi à maitriser correctement ce truc, en gros il te dit que les données XML proviennent d'un serveur différent et par défaut les navigateurs refusent de traiter avec aucun autre que celui de l'origine [provenance] de la page.
03/04/2019, 09h39
MaxLikeMilf

D'accord, c'est bon cela fonctionne correctement sur Firefox merci beaucoup, mais je peux faire cela sans le button ?
Il faut maintenant que je trouve le moyen de faire fonctionner tout ça sur Internet Explorer (c'est le navigateur corporate de mon taff... :roll:)
03/04/2019, 15h05
psychadelic

le bouton sert juste qu'à déclencher l'appel ajax.
apres c'est à toi d'utiliser cela à ta sauce..
03/04/2019, 15h39
MaxLikeMilf

Bon, j'ai trouvé comment le faire fonctionner sur Google Chrome mais sur Internet Explorer ça ne fonctionne pas.... des idées ?
03/04/2019, 18h18
psychadelic

"ça marche pas" c'est vachement constructif comme question, est-ce que tu à bien branché la prise de courant sur l'ordinateur ?

PS : IE c'est du passé, il ne prends pas bien en compte ES6, il faut que tu adapte mon code en ES5 ou pire 4, et peut être utiliser un ou des polyfills, sinon en jQuery 1 (si tu en trouve un) parce que jQuery ne prend plus en compte les version IE < 9

Bonjour,
souvent les choses les plus simples fonctionnent sur tous les navigateurs même les « vieux » imposés !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var url = "nom-de-ton-fichier.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();

et une fonction callback du type de

Code:

1
2
3
4
function fctCallBack(xml) {
  var xmlDoc = xml.responseXML;
  // ici tu utilises les méthodes queySelector et queySelectorAll pour récupérer les éléments qui t'intéressent. 
}

On a eu une discussion il y à peu sur un sujet presque identique : Récupérer les informations d'un fichier XML

18/04/2019, 13h31
MaxLikeMilf

Bonjour, merci pour vos réponses, cependant je suis débutant en HTMl/JVS , du coup il faut que j'apprennes le queryselector....

Bonne journée