<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal"> </p> <p class="MsoNormal">A partir du texte json suivant :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'>{</p> <p class="MsoNormal" style='border:none;padding:0cm'> "personnel": {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nb": "4",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "service": [</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "intitule": "pneumologie",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0296681214",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "employe": [</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Chevalier",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Vincent",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0715182356"</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Fournier",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Yves",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0625364533"</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Larmet",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Stephane",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0660022605"</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> ]</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "intitule": "médecine générale",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0296681216",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "employe": [</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Morvan",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Anne",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0605525266"</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Sarget",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Lucie",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0722265893"</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> ]</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "intitule": "gastrologie",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0296681217",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "employe": [</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Lavandier",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Jules",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0610425987"</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Travel",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Lucie",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0758597422"</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Wagner",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Alain",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0735696899"</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> ]</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "intitule": "cardiologie",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0296681217",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "employe": [</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Bernard",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Jean",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": {}</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Dinan",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Leona",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": {}</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Marmand",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Valérie",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0652524589"</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> "nom": "Vergnes",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "prenom": "Kévin",</p> <p class="MsoNormal" style='border:none;padding:0cm'> "tel": "0688326978"</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> ]</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> ]</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'>}</p> </div> <p class="MsoNormal">On veut obtenir l'affichage suivant :</p> <p class="MsoNormal" align="center" style='text-align:center'> <span style='border:solid windowtext 1.0pt;padding:0cm'><img width= "198" height="138" id="Image 1" src= "coursExploitationTexteJSON_fichiers/image001.png" alt="image" name="Image 1" /></span></p> <span style= 'font-size:11.0pt;font-family:"Calibri",sans-serif'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal">Code html (avec la fonction javascript nécessaire) :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'> <html></p> <p class="MsoNormal" style='border:none;padding:0cm'> <head></p> <p class="MsoNormal" style='border:none;padding:0cm'> <script></p> <p class="MsoNormal" style='border:none;padding:0cm'> function exploitFichierJson()</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> // Ici, le texte json est placé dans une variable javascript</p> <p class="MsoNormal" style='border:none;padding:0cm'> // On peut voir que ce texteJSON est constitué d'un objet ( { ) avec la propriété // "personnel". "personnel" est également un objet avec les propriétés<br /> // "nb", et "service". "service" contient un tableau ( [ ) d'objets… :</p> <p class="MsoNormal" style='border:none;padding:0cm'> var texteJSON = '{"personnel": {"nb": "4","service":[{"intitule": "pneumologie","tel": "0296681214","employe":[{"nom": "Chevalier","prenom":"Vincent","tel": "0715182356"},{"nom": "Fournier","prenom": "Yves", "tel": "0625364533"},{"nom": "Larmet","prenom": "Stephane","tel": "0660022605"}]},{"intitule": "médecine générale","tel": "0296681216","employe":[{"nom": "Morvan","prenom": "Anne","tel": "0605525266"},{"nom": "Sarget","prenom": "Lucie","tel": "0722265893"}]},{"intitule": "gastrologie","employe": [{"nom": "Lavandier","prenom": "Jules","tel": "0610425987"},{"nom": "Travel","prenom": "Lucie","tel": "0758597422"},{"nom": "Wagner","prenom": "Alain","tel": "0735696899"}]},{"intitule": "cardiologie","tel": "0296681217","employe": [{"nom": "Bernard","prenom": "Jean","tel": {}},{"nom": "Dinan","prenom": "Leona","tel": {}},{"nom": "Marmand","prenom": "Valérie","tel": "0652524589"},{"nom": "Vergnes","prenom": "Kévin","tel": "0688326978"}]}]}}';</p> <p class="MsoNormal" style='border:none;padding:0cm'> // JSON.parse transforme le texte json en objet json. donnees ici sera un objet</p> <p class="MsoNormal" style='border:none;padding:0cm'> <b> var donnees = JSON.parse(texteJSON);</b></p> <p class="MsoNormal" style='border:none;padding:0cm'> var affich = document.getElementById('affichage');</p> <p class="MsoNormal" style='border:none;padding:0cm'> </p> <p class="MsoNormal" style='border:none;padding:0cm'> var texte = "<h2>Il y a " + donnees.personnel.nb + " services. Les voici :</h2><ul>";</p> <p class="MsoNormal" style='border:none;padding:0cm'> <b> var tabServices = donnees.personnel.service;</b></p> <p class="MsoNormal" style='border:none;padding:0cm'> // tabServices va donc contenir un tableau d'objets que l'on va parcourir ci-dessous :</p> <p class="MsoNormal" style='border:none;padding:0cm'> <b> for (objet of tabServices)</b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b> {</b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b> texte += "<li>" + objet.intitule + "</li>";</b></p> <p class="MsoNormal" style='border:none;padding:0cm'> <b> }</b></p> <p class="MsoNormal" style='border:none;padding:0cm'> affich.innerHTML = texte + "</ul>";</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> </script></p> <p class="MsoNormal" style='border:none;padding:0cm'> </head></p> <p class="MsoNormal" style='border:none;padding:0cm'><body <b>onLoad = "exploitFichierJson()</b>"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <h1>Resultat du parsing</h1></p> <p class="MsoNormal" style='border:none;padding:0cm'><span id='affichage'></span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </body></p> <p class="MsoNormal" style='border:none;padding:0cm'> </html></p> </div> <p class="MsoNormal"> </p> <p class="MsoNormal">La fonction est lancée automatiquement au chargement de la page grâce à l'onLoad placé dans la balise <body>.</p> </div>
Table des matières
Sujets
Recherche
Help content
Help content
Générée avec
chmProcessor
Générée avec
chmProcessor