danielhagnoul

Comment charger et exploiter un fichier XML avec fetch ?

Noter ce billet

par

, 11/12/2016 à 23h10 (1238 Affichages)

Ce billet complète : Fetch tient ses promesses (découverte du sujet et premiers essais)

Fetch ne disposant pas d'un convertisseur response.xml(), on doit utiliser response.text() et convertir l'objet USVString en objet XML avec un objet DOMParser.

Exemple comprenant le fichier "viewentries.xml" et le fichier HTML

Code XML :

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

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="ISO-8859-1"?>  
<viewentries timestamp="20161211T112506,68Z" toplevelentries="165719">
	<viewentry position="118099" unid="8EF292A9E34AD1F7C1257F3F000464BE" noteid="287D666" siblings="165719">
		<entrydata columnnumber="0" name="GUID">
			<text>SESA402250</text> 
		</entrydata>
		<entrydata columnnumber="1" name="IsSEEmployee">
			<text>No</text> 
		</entrydata>
	</viewentry>
</viewentries>

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script>
    'use strict';
    
    document.addEventListener( 'DOMContentLoaded', ev => {
      
    });
    
    window.addEventListener( 'load', ev => {
      
      const
        arXMLDatas = [],
        kProcessStatus = r => {
          // thenable, pour fetch()
          if ( r.status === 200 || r.status === 0 ){
            return Promise.resolve( r );
          } else {
            return Promise.reject( new Error( r.statusText ) );
          }
        };
        
      fetch( "viewentries.xml" )
        .then( r => kProcessStatus( r ) )
        .then( r => r.text() )
        .then( text => {
          let
            parser = new DOMParser(),
            xmlDocument = parser.parseFromString( text, "application/xml" );
            
          for( let [ index, elem ] of Array.from( xmlDocument.querySelectorAll( "entrydata" ) ).entries() ){
            
            // debug
            console.log( "Élément n° = ", index, "columnnumber = ", elem.getAttribute( "columnnumber" ), "name = ", elem.getAttribute( "name" ), "textContent = ", ( elem.textContent ).trim() );
            
            arXMLDatas.push( [ elem.getAttribute( "columnnumber" ), elem.getAttribute( "name" ), ( elem.textContent ).trim() ] );
          }
          
          console.table( arXMLDatas );
        })
        .catch( er => console.error( er ) );
        
    });
  </script>
</head>
<body>
  <main>    
 
  </main>
</body>
</html>