Voir le flux RSS

danielhagnoul

Comment charger et exploiter un fichier XML avec fetch ?

Noter ce billet
par , 11/12/2016 à 23h10 (223 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>

Envoyer le billet « Comment charger et exploiter un fichier XML avec fetch ? » dans le blog Viadeo Envoyer le billet « Comment charger et exploiter un fichier XML avec fetch ? » dans le blog Twitter Envoyer le billet « Comment charger et exploiter un fichier XML avec fetch ? » dans le blog Google Envoyer le billet « Comment charger et exploiter un fichier XML avec fetch ? » dans le blog Facebook Envoyer le billet « Comment charger et exploiter un fichier XML avec fetch ? » dans le blog Digg Envoyer le billet « Comment charger et exploiter un fichier XML avec fetch ? » dans le blog Delicious Envoyer le billet « Comment charger et exploiter un fichier XML avec fetch ? » dans le blog MySpace Envoyer le billet « Comment charger et exploiter un fichier XML avec fetch ? » dans le blog Yahoo

Commentaires