Libellés

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 :

Envoyer l'article par e-mail
Libellés :

Commentaires

Enregistrer un commentaire