Discussion :

[Canterlot]

Bonjour,

Je rencontre actuellement un soucis avec un fichier JSON que je parse je n'arrive pas à récupérer les informations stocker à l'intérieur

voici mon code ainsi que mon json

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
var xhr = new XMLHttpRequest();
xhr.open("GET", 'loaditem.json', false);
xhr.send(null);
if(xhr.readyState != 4 || (xhr.status != 200 && xhr.status != 0)) // Code == 0 en local
 
    throw new Error("Impossible de charger les objets nommée\" (code HTTP : " + xhr.status + ").");
 
var mapJsonData = xhr.responseText;
var obj1 = JSON.parse(mapJsonData);
 
var drawItem = function(){
    for (i in obj1){
        context.drawImage(Img.item[obj1.item[i].nom],0, 0, 511, 541, 0,0, 511, 541);
        }
 
    }

json:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
{
   "item":[
      {
         "id":"1",
         "nom":"itme1",
         "lien":"img/item01.png",
         "x":"200",
         "y":"200",
         "taillel":"511",
         "tailleh":"541"
      }
   ]
}

TypeError: obj1.item[i] is undefined

je n'arrive pas à savoir pourquoi.

[SpaceFrog]

que retourne un

Code :

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

console.log ( xhr.responseText )

?

[Canterlot]

j'ai résolu le soucis en rajoutant un var i = 0; cependant je possède 2 objets dans le json et la boucle for ne prend en compte que le premier sans afficher le 2ème
voici le code

Code :

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

1
2
3
4
5
6
for (i in obj1){
		var i = 0;
		//console.log(obj1.item[i].nom);
		context.drawImage(Img.item[obj1.item[i].nom],0, 0, obj1.item[i].taillel, obj1.item[i].tailleh, obj1.item[i].x,obj1.item[i].y, obj1.item[i].taillel, obj1.item[i].tailleh);
i++
		}

[Watilin]

Il semble que tu n’aies pas encore complètement compris certaines notions de JS. Ne t’en fais pas, c’est normal, et en venant sur ce forum tu as frappé à la bonne porte pour apprendre

Premièrement, prends garde que ta variable i ne soit pas globale par erreur. Il faut toujours utiliser var. Le mode strict te permet de repérer rapidement ce genre de problème.

Deuxièmement, itérer sur un tableau avec for (… in …) est déconseillé, car cette boucle est faite pour itérer sur les propriétés d’un objet ; c’est seulement « par accident » que les indices d’un tableau sont également considérés comme des propriétés. Si jamais du code tiers sur ton site ajoute des propriétés sur les tableaux (par exemple une méthode bidule), ton i va se retrouver avec la valeur "bidule" à un moment dans ta boucle, et il est évident qu’il n’y a pas d’item.bidule dans ton JSON.

Dans ta boucle, ajoute un console.log(i); pour voir ce qui se passe.

Préfère une bonne vieille boucle for (…; …; …) classique, ou alors la méthode forEach. Exemple :

Code :

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

1
2
3
4
5
6
7
  obj1.forEach(function (it) {
    context.drawImage(Img.item[it.nom],
      0, 0,
      it.taillel, it.tailleh,
      it.x, it.y,
      it.taillel, it.tailleh);
  });

Enfin, ta requête Ajax est synchrone, c’est une mauvaise pratique. Documente-toi sur les fonction de rappel (callback) pour apprendre à tirer le meilleur parti d’Ajax. En attendant, voici à quoi doit ressembler ton code avec une requête asynchrone :

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
var drawItem = function (obj1) {
  obj1.forEach(function (it) {
    context.drawImage(Img.item[it.nom],
      0, 0,
      it.taillel, it.tailleh,
      it.x, it.y,
      it.taillel, it.tailleh);
  });
};
 
var xhr = new XMLHttpRequest();
xhr.open('GET', 'loaditem.json');
 
xhr.onload = function () {
  if (xhr.status !== 200) {
     throw new Error('Erreur Ajax (code = ' + xhr.status + ')');
  }
  var mapJsonData = xhr.responseText;
  var obj1 = JSON.parse(mapJsonData);
  drawItem(obj1);
};
 
xhr.onerror = function () {
  throw new Error('Erreur de connexion');
};
 
xhr.send(null);

Dernière remarque : personnellement j’aime bien mettre un try/catch autour de JSON.parse, mais tu fais comme tu veux.