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

Version imprimable

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:

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:

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é.:weird:

21/12/2016, 10h21
NoSmoking

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

Citation:

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 » ?
21/12/2016, 11h54
while.dede

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.
21/12/2016, 15h56
NoSmoking

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...

Citation:

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:

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:

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>

@daniel :

Citation:

Code:

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:

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