Bonjour, j'ai besoin d'un conseil pour un site web, étant débutant je me sens un peu perdu dans les bases de données et souhaiterai connaitre votre avis sur la meilleur façon de faire.

J'ai une page index.html avec des liens vers une autre page chats.html vide, et un fichier chats.json, je voudrais qu'en cliquant sur un des liens de index.html, charger dynamiquement les données sur la page chat.html affichant le nom, race, la photo du chat.
Mes données sont en formats Json.

Comment récupérer et filtrer les données svp.

Html:

<div class="mesChats" data-nomChat="miaou"><img...></img>
</div>


javavscrip:


var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {

        var resp = JSON.parse(xhttp.responseText);

        var reponse = resp.chats;
        var tousChats= document.querySelectorAll('.mesChats');


        tousChats.forEach(function (e) {

               e.addEventListener('click', function () {

                   var chatChoisi = e.getAttribute('data-nomChat');

                  /* et la je ne sais pas comment parcourir ou filtrer les infos et les afficher selon le choix de l'utilisateur. */
});

    }
};
xhttp.open("GET", "./json/chats.json", true);
xhttp.send();
                
 

Modifié par geekeagle (25 Sep 2018 - 13:56)