javaScript

Le Json :

Le JSON (JavaScript Object Notation) est un format de données textuel dérivé de la notation des objets du langage JavaScript, il est utilisé pour représenter des données structurées de façon semblable aux objets Javascript.

Voici un exemple de l'une de ses utilisations, lorsque l'on clique sur l'image d'un fruit, on verra s'inscrire son nom, sa description et sa composition.

Maintenant, je vais vous expliquer comment cela fonctionne, je vais vous fournir déja le code du Json :

[
    {
        "fruit": "(Veuillez cliquer sur un fruit...)",
        "description": "(Veuillez cliquer sur un fruit...)",
        "composition": "(Veuillez cliquer sur un fruit...)"
    },
    {
        "fruit": "<b>Ananas</b>",
        "description": "L'ananas est un fruit de la plante du même nom, cette plante est de la famille des broméliacées.<br>Il est originaire des pays de l'amérique du sud.",
        "composition": "Composé à 85% d'eau et relativement pauvre en glucides, c'est un fruit riche en vitamine C."
    },
    {
        "fruit": "<b>Banane</b>",
        "description": "La banane est le fruit du bananier.<br>Originaire d’Asie du Sud-Est, elle est cultivé en Afrique, en Amérique du Sud et en Asie.",
        "composition": "Composé à 75% d'eau et de 20% de glucide (amidon + fructose)."
    },
    {
        "fruit": "<b>Cerise</b>",
        "description": "La cerise est le fruit du cerisier.<br>Originaire du Proche-Orient, la cerise a été introduite en Europe par les romains.",
        "composition": "Composé de 85% d'eau et 15% de glucide (amidon + fructose)."
    },
    {
        "fruit": "<b>Citron</b>",
        "description": "Le citron est un agrume, fruit du citronnier.<br>Originaire de Chine et d'Inde, sur les contreforts de l'Himalaya, il a été utilisé dès le début du Moyen Âge.",
        "composition": "Composé à 90% d'eau et relativement pauvre en glucides, c'est un fruit riche en vitamine C."
    },
    {
        "fruit": "<b>Fraise</b>",
        "description": "La fraise est le fruit du fraisier.<br>Originaire de l'amérique du nord, de l'asie et europe centrale.",
        "composition": "Composé à 90% d'eau et relativement pauvre en glucides, c'est un fruit riche en vitamine C."
    },
    {
        "fruit": "<b>Kiwi</b>",
        "description": "Le kiwi pousse sur une plante grimpante du nom de actinidia.<br>Originaire de chine, il a été introduit en europe au début du 20ème siècle.",
        "composition": "Composé à 85% d'eau et relativement pauvre en glucides, c'est un fruit très riche en vitamine C."
    }
]

Comme on peut le constater, les données contenant le fichier Json sont celles qui s'affichent dans cet exemple en fonction du fruit sur lequel on a cliqué.
Le fichier Json se construit comme un "array" ou "object", il peut comporter des booléens (boolean), du texte (string), des nombres (number), puis une valeur "Null".
Petite particularité, il n'est pas possible de sauter des lignes dans une valeur de texte, tout doit être écrit entre les guillemets sur un seul ligne.

Voici le code HTML :

<div class="fruits">      
        <aside class="liste">
			<img src="../asset/image/memo_javaScript/ananas.png" data-value="1" alt="ananas"/>
			<img src="../asset/image/memo_javaScript/banane.png" data-value="2" alt="banane"/>
			<img src="../asset/image/memo_javaScript/cerise.png" data-value="3" alt="cerise"/>
			<img src="../asset/image/memo_javaScript/citron.png" data-value="4" alt="citron"/>
			<img src="../asset/image/memo_javaScript/fraise.png" data-value="5" alt="fraise"/>
			<img src="../asset/image/memo_javaScript/kiwi.png" data-value="6" alt="kiwi"/>
		</aside>
			
		<aside class="contenu">
			<p><b><u>Fruit :</u></b> <span class="fruit"></span></p>
			<p><b><u>Description :</u></b> <span class="description"></span></p>
			<p>><b><u>Compositionn :</u></b> <span class="composition"></span></p>
		</aside>
</div>

Et pour simuler une image comme lien, je feinte un peu avec du code css.

.liste img{
     cursor: pointer;
}

Et pour finir, le code javaScript :

// Récupération des données du fichier JSON via la méthode fetch
fetch("../asset/js/fruit.json")
  // Traitement de la réponse du serveur
  .then(response => response.json())
  // Traitement des données récupérées
  .then(data => {
    // Sélection des éléments HTML qui seront mis à jour
    const fruitElement = document.querySelector(".fruit");
    const descriptionElement = document.querySelector(".description");
    const compositionElement = document.querySelector(".composition");

    // Mise à jour des éléments HTML avec les première données
    fruitElement.innerText = data[0].fruit;
    descriptionElement.innerText = data[0].description;
    compositionElement.innerText = data[0].composition;

    // Sélection de tous les liens avec l'attribut "data-value"
    const links = document.querySelectorAll('img[data-value]');

    // Ajout d'un événement click sur chaque image
    links.forEach(link => {
      link.addEventListener("click", event => {

        // Récupération de la valeur de l'attribut "data-value" de l'image cliqué
        const value = link.getAttribute("data-value");
        // Récupération des données du fruit correspondant à la valeur
        const fruitData = data[value];

        // Mise à jour des éléments HTML avec les données du fruit cliqué
        fruitElement.innerHTML = fruitData.fruit;
        descriptionElement.innerHTML = fruitData.description;
        compositionElement.innerHTML = fruitData.composition;
      });
    });
  })
  // Traitement des erreurs éventuelles
  .catch(error => {
    console.error("Erreur :", error);
  });

Dans ce code javaScript, on utilise tout d'abord la méthode fetch() qu'on pourrait traduire par "aller chercher", cette méthode permet de récupérer le fichier Json à l'adresse qu’on lui a indiqué entre parenthèses, c'est ce qu'on appelle une requête HTTP GET.

fetch() retourne une "Promise" (promesse), une Promise est un objet qui représente une opération asynchrone qui n'est pas encore terminée, "asynchrone" c’est-à-dire qu’elle ne bloque pas le reste du code pendant qu’elle attend la réponse.

Pour récupérer la reponse, on utilise .then(response => response.json())

response.json() est une méthode fournie par l’objet Response (retourné par fetch), elle lit le corps de la réponse et le transforme en objet JavaScript.

La seconde méthode .then(data => {... va nous permettre d'utiliser et traiter les données dans une fonction.

Dans la fonction on sélectionne les éléments html en les enregistrant dans une variable.
Lorsque l'on arrive sur la page ou si on l'actualise, on met à jour avec les premiers éléments de l'objet avec le = data[0].
Ensuite on sélectionne toutes les images avec ses attributs et on l'enregistre dans une variable "link".
const links = document.querySelectorAll('img[data-value]');
On ajoute un écouteur d’événement sur chaque image en se servant d'une boucle et, lorsque l'on clique sur une image, on déclenche une fonction.
Dans cette seconde fonction, on va récupérer la valeur de l’attribut data-value de l'image qui a été cliqué, puis l'enregistrer dans une première variable value.
Dans la seconde variable fruitData, on va récupérer les données du fruit correspondant dans le JSON.
Ensuite, on met à jour les données que l'on vient de récupérer sur l'objet Json qui correspond à l'attribut de l'image cliqué.

Pour finir, la méthode .catch, elle traite le fetch() en cas d'erreur, si jamais le serveur ne repond pas ou une erreur dans l'adresse, etc...

Le Json :

~~ Fin ~~

Fin