Afficher des informations d'un document xml en fonction du nom inséré dans un champ

**while.dede** · 20/12/2016, 01h41

Bonjour à tous,
J'ai un petit soucis, j'essaye de faire apparaître le numéro de téléphone contenu dans un fichier xml sur une page web en fonction du nom que l'utilisateur insère dans le champ dédié.
Le problème c'est que je n'arrive à rien j'ai essayé différentes structures je bloque totalement.( la page s'affiche mais elle me renvoi le nom seulement ou rien du tout)

Voici le code xml:

Code xml :

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

1
2
3
4
5
6
7
<?xml version="1.0" encoding="ISO-8859-1"?>
<annuaire>
 <individu><nom>Jean</nom><telephone>456-4321</telephone></individu>
 <individu><nom>Pierre</nom><telephone>456-4221</telephone></individu>
 <individu><nom>Jacques</nom><telephone>553-4221</telephone></individu>
 <individu><nom>Marie</nom><telephone>456-4211</telephone></individu>
</annuaire>

et voici mon premier essai ou j'ai essayé d'insérer le document xml directement dans un fichier html au sein d'un élément de type script:

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
<?xml version="1.0" encoding="ISO-8859-1" ?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <html>
  <header>
  <script id="telephone" type="application/xml">
  <annuaire>
   <individu><nom>Jean</nom><telephone>456-4321</telephone></individu>
   <individu><nom>Pierre</nom><telephone>456-4221</telephone></individu>
   <individu><nom>Jacques</nom><telephone>553-4221</telephone></individu>
   <individu><nom>Marie</nom><telephone>456-4211</telephone></individu>
  </annuaire>
 
  </script>
  <script>
 
  function chargeXML() {
    var monxml = document.getElementById("telephone").textContent;
    return new DOMParser().parseFromString(monxml, "application/xml");
  }
 
  </script>
  </header>
  <body>
    <form>
<input type="field" id="champ" />
<input type="button"
onclick="alert(document.getElementById('champ').value)" />
</form>
  </body>
  </html>
</html>

J'ai du oublier quelque chose car il me retourne seulement le nom qui a été inséré.

**NoSmoking** · 21/12/2016, 10h21

Bonjour,
Pourquoi ne pas mettre tes données dans un <select> par exemple ?

J'ai un petit soucis, j'essaye de faire apparaître le numéro de téléphone contenu dans un fichier xml sur une page web en fonction du nom que l'utilisateur insère dans le champ dédié.

est ce que tu sous entend que tu souhaites faire de « l'autocomplétion » ?

**while.dede** · 21/12/2016, 11h54

En fait je voudrais que quand l'utilisateur entre un nom qui est présent dans le code xml , la page web affiche un message avec le nom et le numéro.

**NoSmoking** · 21/12/2016, 15h56

Il y a plusieurs façons d'arriver au résultat, création d'un objet tye JSON avec les données, insertion du xml dans la page ...(autre)... ou requête Ajax.

Il serait intéressant que tu nous dises la quantité de données à manipuler, le traitement peut être différent, si des noms peuvent être en double éventuellement, comment sont renseignées les données fichier xml, base de données...

**danielhagnoul** · 21/12/2016, 19h53

Envoyé par NoSmoking

Il y a plusieurs façons d'arriver au résultat...

Oui ! Avec le JS d'auhjourd'hui :

Fichier individu.xml

Code XML :

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

1
2
3
4
5
6
7
<?xml version="1.0" encoding="ISO-8859-1"?>
<annuaire>
 <individu><nom>Jean</nom><telephone>456-4321</telephone></individu>
 <individu><nom>Pierre</nom><telephone>456-4221</telephone></individu>
 <individu><nom>Jacques</nom><telephone>553-4221</telephone></individu>
 <individu><nom>Marie</nom><telephone>456-4211</telephone></individu>
</annuaire>

Fichier

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
<!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';
    
    const kProcessStatus = r => {
      // thenable, pour fetch()
      if ( r.status === 200 || r.status === 0 ){
        return Promise.resolve( r );
      } else {
        return Promise.reject( new Error( r.statusText ) );
      }
    };
    
    document.addEventListener( 'DOMContentLoaded', ev => {
            
    });
    
    window.addEventListener( 'load', ev => {
      
      // traitement du fichier induvidu.xml et exploitation du résultat
      
      fetch( "individu.xml" )
        .then( r => kProcessStatus( r ) )
        .then( r => r.text() )
        .then( text => {
          let
            arOfObjIndividu = [],
            parser = new DOMParser(),
            xmlDocument = parser.parseFromString( text, "application/xml" );
            
          for( let [ index, elem ] of Array.from( xmlDocument.querySelectorAll( "individu" ) ).entries() ){
            arOfObjIndividu.push(
              {
                "nom" : ( elem.children[0].textContent ).trim(),
                "telephone" : ( elem.children[1].textContent ).trim()
              }
            );
          }
          
          // debug
          console.log( arOfObjIndividu );
          
          // exploitation de l'array arOfObjIndividu
            
          function telOfNom( nom="Daniel" ){
            for ( let obj of arOfObjIndividu ){
              if ( nom === obj.nom ) return obj.telephone;
            }
            
            return "inconnu";
          }
          
          console.log( telOfNom() );
          console.log( telOfNom( "Pierre" ) );
 
          
        })
        .catch( er => console.error( er ) );
        
    });
  </script>
</head>
<body>
  <main>    
 
 
  </main>
</body>
</html>

**NoSmoking** · 22/12/2016, 20h37

@daniel :

Code :

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

1
2
3
4
{
  "nom" : ( elem.children[0].textContent ).trim(),
  "telephone" : ( elem.children[1].textContent ).trim()
}

pas sûr que cette partie fonctionne si le XML est « beautifier » par exemple

Code xml :

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
<?xml version="1.0" encoding="ISO-8859-1"?>
<annuaire>
  <individu>
    <nom>Jean</nom>
    <telephone>456-4321</telephone>
  </individu>
  <individu>
    <nom>Pierre</nom>
    <telephone>456-4221</telephone>
  </individu>
  <individu>
    <nom>Jacques</nom>
    <telephone>553-4221</telephone>
  </individu>
  <individu>
    <nom>Marie</nom>
    <telephone>456-4211</telephone>
  </individu>
</annuaire>

[EDIT] Ajout exemple de formatage

Afficher des informations d'un document xml en fonction du nom inséré dans un champ

JavaScript

Discussions similaires

Partager

Partager