A partir du texte json suivant :
{
"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",
"tel": "0296681217",
"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"
}
]
}
]
}
}
On veut obtenir l'affichage suivant :
Code html (avec la fonction javascript nécessaire) :
<html>
<head>
<script>
function exploitFichierJson()
{
// Ici, le texte json est placé dans une variable javascript
// 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
// "nb", et "service". "service" contient un tableau ( [ )
d'objets… :
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"}]}]}}';
// JSON.parse transforme le texte json en objet json. donnees ici sera un objet
var donnees = JSON.parse(texteJSON);
var affich = document.getElementById('affichage');
var texte = "<h2>Il y a " + donnees.personnel.nb + " services. Les voici :</h2><ul>";
var tabServices = donnees.personnel.service;
// tabServices va donc contenir un tableau d'objets que l'on va parcourir ci-dessous :
for (objet of tabServices)
{
texte += "<li>" + objet.intitule + "</li>";
}
affich.innerHTML = texte + "</ul>";
}
</script>
</head>
<body onLoad = "exploitFichierJson()">
<h1>Resultat du parsing</h1>
<span id='affichage'></span>
</body>
</html>
La fonction est lancée automatiquement au chargement de la page grâce à l'onLoad placé dans la balise <body>.