Exploiter plusieurs fichiers dans une requête XMLHttpRequest.

Bonsoir à tous !

Je vous explique ma situation, je créer actuellement un outil en javascript de façon ludique afin de pouvoir m'exercer.

//---> Contexte :
Cet outil se compose de deux parties, gauche & droite. Sur la gauche une liste (<select>) nommée "Équipements" qui déroule plusieurs catégories "Chapeaux | capes | amulettes | anneaux etc..."

Quand l'utilisateur clique sur une catégorie, imaginons Chapeaux tous les chapeaux apparaissent dans ma liste de gauche, sur capes les capes etc...

L'utilisateur peut ensuite choisir l'un des chapeaux et afficher sur la deuxième partie de droite les informations liées a ce chapeau.

//--> Méthode :
J'ai donc du rechercher une façon de stocker les informations de mes équipements dans plusieurs fichiers JSON pour pouvoir récupérer le :
"name":
"level":
"caracteristique":
"recette":
"image":
"condition":
"description":

Pour cela je m'y suis prit de cette façon :

<!-- Je cible ma requête via un getElementById ( ne pas prêter attention a l'id et le style de la div  ) -->
<div id="3" style="display:none">

                    <li class="list-item-beige" id="chapeaux" >
                    </li>

</div>

    <script> // Lecture des fichiers JSON
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              var response = JSON.parse(xhttp.responseText);// Récupère les informations des fichiers json et les parses

              // Liste des fichiers json Équipements + Armes + Clefs via Response
              var chapeaux = response.chapeaux;
              var capes = response.capes;
              var amulettes = response.amulettes;
              var anneaux = response.anneaux;
              var ceintures = response.ceintures;
              var bottes = response.bottes;
              var sacs = response.sacs;
              var outils = response.outils;
              var epees = response.epees;
              var marteaux = response.marteaux;
              var dagues = response.dagues;
              var pelles = response.pelles;
              var haches = response.haches;
              var batons = response.batons;
              var baguettes = response.baguettes;
              var arcs = response.arcs;
              var boucliers = response.boucliers;
              var clefs = response.clefs;

                            // Listage des items
                            var chapeauxListe = '';
                            var capesListe = '';
                            var amulettesListe = '';
                            var anneauxListe = '';
                            var ceinturesListe = '';
                            var bottesListe = '';
                            var sacsListe = '';
                            var outilsListe = '';
                            var epeesListe = '';
                            var marteauxListe = '';
                            var daguesListe = '';
                            var pellesListe = '';
                            var hachesListe = '';
                            var batonsListe = '';
                            var baguettesListe = '';
                            var arcsListe = '';
                            var boucliersListe = '';
                            var clefsListe = '';

              // Liste de gauche récupération des catégories
              for(var i = 0;i < chapeaux.length; i++){
                 chapeauxListe += '<a href="javascript:visibilite(\''+chapeaux[i].name+'\');"><img src='+chapeaux[i].image+'>'+'<font color="#a96a01">'+chapeaux[i].name+'&nbsp;&nbsp;&nbsp;&nbsp;<font color="#514a3c">'+chapeaux[i].level+'</p></a>';
              }
              document.getElementById('chapeaux').innerHTML = chapeauxListe;

            }
        };
        xhttp.open("GET", "items/chapeaux.json","items/capes.json", true);
        xhttp.send();
    
</script>

Le code ici présent fonctionne, dans ma liste de gauche la catégorie se liste en se basant sur mon fichier chapeaux.json et donc affiche l'image le nom et le niveau du chapeau.

// Problématique :

Mon problème est le suivant j'essaye depuis 3 jours d'afficher les autres fichiers Json dans des les id différents de ma liste mais impossible.. Rien n'y fait je bloque totalement ! Je bloque a deux niveaux :

  for(var i = 0;i < chapeaux.length; i++)

Ainsi que :

        xhttp.open("GET", "items/chapeaux.json","items/capes.json", true);
        xhttp.send();

Si quelqu'un de plus expérimenter peut m'expliquer ce qui couille je suis preneur ! Merci d'avance et bonne journée/soirée a vous !
Modifié par Vaudoo (17 Nov 2018 - 02:50)

niuxe a écrit :
XMLHttpRequest.open()

Hum si tu peux être un peu explicite ça m'aiderait grandement

Bonjour Vaudoo,
Ce que je pense veut dire @niuxe
C'est que ton problème vient de ton utilisation XMLHttpRequest.open()
il te met un lien vers la documentation de XMLHttpRequest.open() qu'il faut lire
et si tu regardes la Syntaxe tu comprendras vite je pense d'où vient ton problème.