Exploiter plusieurs fichiers JSON dans une requête XMLH !
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:
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:
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+' <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:
for(var i = 0;i < chapeaux.length; i++)
Ainsi que :
Code:
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 !
