Javascript : JSON et gabarit (template string)
Le fichier JSON
Le fichier JSON contient un tableau contenant les données des contacts : Avatar, prénom, nom, email et téléphone.
[
{
"avatar": "avatars/avatar3.png",
"firstname": "Jane",
"lastname": "Doe",
"email": "jane.doe@example.com",
"phone": "06 00 00 00 00"
},
{
"firstname": "John",
"lastname": "Doe",
"email": "john.doe@example.com",
"phone": "06 00 00 00 01"
},
{
"avatar": "avatars/avatar1.png",
"firstname": "Sherlock",
"lastname": "Holmes",
"email": "sherlock.holmes@example.com",
"phone": "06 00 00 00 02"
},
{
"avatar": "avatars/avatar2.png",
"firstname": "Bruce",
"lastname": "Wayne",
"email": "bruce.wayne@example.com",
"phone": "06 00 00 00 03"
},
{
"avatar": "avatars/avatar4.png",
"firstname": "John",
"lastname": "Smith",
"email": "john.smith@example.com",
"phone": "06 00 00 00 04"
}
]
Le gabarit (template string)
Le gabarit va nous permettre d'insérer les données dans les éléments HTML.
`
<div class="col-lg-4 col-md-6">
<div class="card contact-card">
${person.avatar ? `<img class="card-img-top rounded-circle avatar" src="${person.avatar}" alt="Avatar" />` : '<img class="card-img-top rounded-circle avatar" src="/resources/default-avatar.png" alt="Default Avatar" />'}
<div class="card-body">
<h5 class="card-title">${person.firstname} ${person.lastname}</h5>
<p class="card-text">${person.email}</p>
<p class="card-text">${person.phone}</p>
</div>
</div>
</div>
`
Javascript
Dans cet exemple, j'utilse l'API fetch. Vous pouvez consulter cet article sur l'API fetch.
/* L'élément où l'on affiche la liste des contacts */
contactsListElement = document.getElementById("persons-list");
getContactsList()
.then(contacts => getFormatOfContactCard()
.then(templateString => formatContactList(contacts, templateString)));
/** Récupère les contacts (contacts.json) */
async function getContactsList() {
return fetch("contacts.json")
.then(response => response.json());
}
/**
* Récupère le gabarit (template string)
* du fichier contact-card.js
* */
async function getFormatOfContactCard() {
return fetch("contact-card.js")
.then(response => response.text());
}
/**
* Affiche et formate la carte de contact selon
* le gabarit (template string)
*/
function formatContactList(contacts, templateString) {
contactsListElement.innerHTML = contacts.map(person => eval(templateString)).join("");
}
Les fichiers HTML et CSS
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacts</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<h1>Mes contacts</h1>
<div id="persons-list" class="row"></div>
</div>
</body>
</html>
.contact-card {
width: 18rem;
margin-top: 50px;
margin: 50px auto auto auto;
}
.avatar {
width: 100px;
margin: 0 auto;
}
Le résultat
L'arborescence du projet :
Commentaires
Enregistrer un commentaire