Javascript: ne pas comprendre la boucle sur la matrice associative

Question

J'ai un objet JSON (bien c'est ce que je pensais avoir défini) et j'essaie d'accéder aux valeurs d'un tableau en son sein. Il est en boucle trois fois ce qui est correct, mais la valeur de img.iName est toujours undefined

Qu'est-ce que j'ai mal compris?

<div id="dbgDIV">Debug Div<br></div> 
<script> 
    // imgs as a JSON array 
    var gallery = {"imgs": 
       [ // Height and Width to be added 
        {"iName":"File1.jpg", "tName": "File1_th.jpg","cap":"This is a Caption for File1"}, 
        {"iName":"File2.jpg", "tName": "File2_th.jpg","cap":"This is a Caption for File2"}, 
        {"iName":"File3.jpg", "tName": "File3_th.jpg","cap":"This is a Caption for File3"} 
       ], 
       "imgCount":"3" 
    }; 
    var dbgDIV = document.getElementById("dbgDIV"); 
    for (var img in gallery.imgs) { 
     dbgDIV.innerHTML = dbgDIV.innerHTML + "img=" + img.iName + "<br>"; 
     console.log(img.iName); 
    } 

</script> 

Answer 1

La boucle for...in est le problème. Il suffit d'utiliser une boucle for traditionnelle à l'index dans le tableau:

var gallery = { 
 
    "imgs": [ 
 
    { 
 
     "iName": "File1.jpg", 
 
     "tName": "File1_th.jpg", 
 
     "cap": "This is a Caption for File1" 
 
    }, 
 
    { 
 
     "iName": "File2.jpg", 
 
     "tName": "File2_th.jpg", 
 
     "cap": "This is a Caption for File2" 
 
    }, 
 
    { 
 
     "iName": "File3.jpg", 
 
     "tName": "File3_th.jpg", 
 
     "cap": "This is a Caption for File3" 
 
    } 
 
    ], 
 
    "imgCount": "3" 
 
}; 
 
var dbgDIV = document.getElementById("dbgDIV"); 
 
for (var i = 0; i < gallery.imgs.length; i++) { 
 
    var img = gallery.imgs[i]; 
 
    console.log(img.iName); 
 
}

Answer 2

Le ... dans les boucles itère sur clés, donc dans un tableau itll être

0,1,2 

et ces numéros n'ont pas un iName. Vous pouvez itérer sur valeurs avec la boucle for..of:

for(var img of gallery.imgs) 

Answer 3

vous devez utiliser un pour ... de/forEach/boucle au lieu de la boucle for..in vous avez utilisé.

pour démontrer rapidement la différence entre la for..in et la boucle for..of:

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {}; 

let iterable = [3, 5, 7]; 
iterable.foo = 'hello'; 

for (let i in iterable) { 
    console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" 
} 
for (let i of iterable) { 
    console.log(i); // logs 3, 5, 7 
} 

qui signifie qu'il ne va pas vraiment à travers les éléments de tableau que vous vouliez, mais les propriétés sur toutes dénombrables du objet. (En javascript toutes les variables sont des objets)

Je vous suggère d'aller avec quelque chose comme:

gallery.imgs.forEach(img => { 
    console.log(img.iName) // "File1.jpg" , "File2.jpg", ... 
});