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 :

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<!-- 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>

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<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>
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 :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
 for(var i = 0;i < chapeaux.length; i++)
Ainsi que :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
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 !