Démo JSON/Objet JavaScript

Illustration manipulation objet javascript et stringify/parse

by philBou

HTML

<script src="apprenants.json"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
   <title>Lecture JSON</title>
  </head>

  <body>
    <h1>
     Démo JSON/Objet JavaScript
    </h1>
    <section id="resultat" style="visibility : hidden;">
    <fieldset>
       <legend>Identité</legend>
      <p>
       <label for="identifiant">identifiant : </label>
       <label id="identifiant"></label>
       </p>
  <p>
       <label for="nom">Nom : </label>
       <label  id="nom"></label>
       </p>
  <p>
       <label for="prenom">Prénom : </label>
       <label  id="prenom"></label>
        </p>
  <p>
       <label for="email">Email : </label>
       <label id="email"></label> 
       </p>
      </fieldset>
      <fieldset>
       <legend>Activités</legend>
       <div id='liste'></div>
       </fieldset>
    </section>
  </body>

</html>

CSS

body {
  background-color: #F08080;
}
p
{
  line-height:1em;
  vertical-align:center;
}

JavaScript

// les constantes pour la partie HTML
let identifiant = document.getElementById("identifiant");
let nom = document.getElementById("nom");
let prenom = document.getElementById("prenom");
let email = document.getElementById("email");
let resultat = document.getElementById("resultat");
let liste = document.getElementById("liste");
 let lesActivites = [];

// notre objet au format javascript
let apprenant = {
    id: 1,
    prenom: 'Rosalyn',
    nom: 'Arman',
    email: '[email protected]',
    activites: ['dormir','manger','lire']
};
//console.log(typeof apprenant);

// transforme mon objet en json pour la démo
 let json = JSON.stringify(apprenant);
 
 // alert(typeof json); // pour connaitre le type affiche string
  // on affiche le fichier au format JSON 
  // alert(json);
 // en json cela donne la structure suivante :
/*
{
  email: "[email protected]",
  id: 1,
  nom: "Arman",
  prenom: "Rosalyn",
   activites: ["dormir", "manger", "lire"]
}
*/

// on va parser notre Json en objet javascript
// pour le retrouver et l'exploiter
// on pourait aussi directement utiliser notre json
// on verra plus tard avec les api.

let notreObjetJavaScript = JSON.parse(json);
//console.log(notreObjetJavaScript);

// méthode pour initialiser notre objet
const getApprenant = () => {
 
 	 console.log(notreObjetJavaScript);
   identifiant.innerText = notreObjetJavaScript.id;
   prenom.innerText = notreObjetJavaScript.prenom;
   nom.innerText = notreObjetJavaScript.nom;
   email.innerText = notreObjetJavaScript.email;
   resultat.style.visibility = 'visible';   
   lesActivites = notreObjetJavaScript.activites;
   
   
   // si il existe des activités, il faut créer une liste pour les afficher
   if(lesActivites.length >0)
   {
    // création de la balise ul
   	const ul = document.createElement('ul');
    // ajout dans la div
    liste.appendChild(ul);
    // lecture de notre boucle d'activités   
    for(let activite of lesActivites)
    {
    	const li =...