Discussion :

[Vaudoo]

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 !

[psychadelic]

désolé, mais rien ne va dans ton code.

_ les balises sont soit pas ouvertes ( balises <p> ) soit pas fermées balises </font> (en plus d'être obsolètes, tout ça se fait en css)
_ tu code ton JavaScript avec une technique des années 80, (plus de 30ans se sont passées depuis, et en informatique ça représente 40 siècles )
( voir pire, on dirait du COBOL )

bref tout ce que tu a codé peut s'écrire en une douzaine de lignes :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
fetch('items/chapeaux.json')
.then(function(response) { return response.json(); })
.then(function(json) {
  let cumulInfo = '';
  for (let Chapeau_X of json.chapeaux )
  {
    cumulInfo +=  `<a href="javascript:visibilite('${Chapeau_X.name}');">`;
    cumulInfo +=  `<p><img src='${Chapeau_X.image}' />`;
    cumulInfo +=  `<font color="#a96a01">${Chapeau_X.name}'&nbsp;&nbsp;&nbsp;&nbsp;</font>`;
    cumulInfo +=  `<font color="#514a3c">${Chapeau_X.level}'</font></p></a>`;
  }
  document.getElementById('chapeaux').innerHTML = cumulInfo;
});

et au passage si tu à vraiment besoin l'utilité déclarer des milliers de variables (inutiles ici), utilise plutôt cette écriture):

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
// Listage des items
var
  chapeauxListe   = "",
  capesListe      = "",
  amulettesListe  = "",
// ...
  boucliersListe  = "",
  clefsListe      = ""
;

pour 1ere info :
https://developer.mozilla.org/fr/doc...tions/for...of
https://developer.mozilla.org/fr/doc...PI/Using_Fetch

mais sinon on n'utilise pas non plus une balise <a href=".... pour lancer l’exécution d'un script sur une image , on utilise pas non plus une zone texte en HTML pour remplir une liste, on utilise pas non plus la balise img de cette manière pour les images comportant une légende.


et encore, je t'ai épargné les fonctions fléchées..

[psychadelic]

Donc, plutôt quelque chose dans ce genre :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var LesChapeaux = document.getElementById('chapeaux');
 
fetch('items/chapeaux.json')
.then(function(response) { return response.json(); })
.then(function(json) {
  for (let Chapeau_X of json.chapeaux )
  {
    let  inHTML =  `<img src='${Chapeau_X.image}' alt="" />`;
       inHTML  +=  `<figcaption>${Chapeau_X.name}<span>${Chapeau_X.level}</span></figcaption>`;
    let xFigure       = document.createElement('figure');
    xFigure.innerHTML = inHTML;
    LesChapeaux.appendChild(xFigure);
    xFigure.onclick=e=>visibilite(Chapeau_X.name);
  }
});

avec à minima dans la partie css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
figcaption { color: #a96a01 }
figcaption > span { color: #514a3c, text-align: right; }

[Vaudoo]

Merci pour ta réponse Psychadelic ! Je t'avoue que je commence javascript de façon autodidacte et j'essaye de me former comme je peux Et ton message vient remettre pleins de doute sur tout ce que j'ai appris ahah Quelle ironie un vieux qui code en jeune et un jeune qui code en vieux ahah

Mais bon c'est comme ça je persévère !!! Bon effectivement tout est plus simple ! Cependant un problème persiste vu que j'ai plusieurs fichiers différents comme le capes.json imaginons ! Est-ce que je dois a chaque fois relancer un fetch pour chaque éléments ?

Il n'y t-il pas un moyen de traiter l'ensemble de plusieurs fichiers dans cette même requête ? Merci encore !!!

[psychadelic]

Que ce soit un fetch ou autre chose, sera toujours dans un système 1 pour un.
On est dans un système de Fichier séquentiel, pas de base données, donc si tu veux synchroniser la lecture de plusieurs fichiers, c'est à toi de le faire.
Mais t'a pas l'air de réaliser que tout ça se fait en réseau et que tout est asynchrone.
Le fetch lui même est asynchrone, avec ses 3 séquences espacées dans le temps.
Au final, c'est le Fichier entier qui est transmis, pas un pointeur sur une ligne à l'intérieur du Fichier.

Tu m'a aussi l'air de comprendre les choses à l'envers: le première vocation d'un poste client, c'est d'afficher des données, autrement dit, les seules données qui ont vocation à être conservées sont celles qui sont affichées.
Bien sur tu peux aussi les conserver ces données dans ton JS, ou les mettre dans des cookies, ou les avoir dans un LocalHost ou encore sur IndexedDB.

Mais le Fetch renvoi une variable temporaire (appelée json dans mon exemple de code) qui passera sous la tutelle du seul garbage collector une fois la fonction achevée.
à toi de la copier dans une variable permanente si tu veux (assign => https://developer.mozilla.org/fr/doc.../Object/assign)

Si le code ici les placent directement sur l'affichage, c'est parce qu'on est dans la logique client / serveur, et tu devrai considérer le principe de réaliser ton merge à l'écran au fur et à mesure des différents Fetch, et non attendre que tous les Fech soit arrivés pour ensuite faire le merge, qui ensuite pourra être disponible pour l'affichage, ce qui peut prendre des plombes, surtout si la liaison réseau déliquescente, ou que ton code se plante au milieu pour x raisons.

Car encore une fois, tout est assynchrone, donc tu devra attendre la fin de l'ensemble des Fetch pour exécuter le "merge".

Quelque soit le cas de figure que tu choisisse, ce sera obligatoirement une gestion par promesses => https://developer.mozilla.org/fr/doc..._les_promesses

[Vaudoo]

Merci pour ta réponse encore une fois !

Je vais reprendre l'intégralité du tutoriel sur developer.mozilla j'ai vraiment envie d'apprendre et surtout comprendre le Javascript ! Merci pour ton temps je te souhaite une belle fin de journée !