Javascript：連想配列のルーピングを理解していません

Question

私はJSONオブジェクトを持っています（これは私が定義したものです）、その中の配列の値にアクセスしようとしています。私が何を誤解している正しいが、img.iNameの値は常にundefined

である3回ループしていますか？

<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

for...inループが問題です。ただ、配列のインデックスに伝統的なforループを使用します。

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

ザ・用... キー以上のループの繰り返し処理では、配列内のitll

0,1,2 

なるので、

これらの番号はiNameを持っていません。あなたはfor..ofループと値を反復することもできます。

for(var img of gallery.imgs) 

Answer 3

あなたが代わりに使用したこのfor..inループでの/ループのためのforEach/...のために使用する必要があります。

はすぐにfor..inと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 
} 

それは本当にあなたが望んでいたが、配列の要素を通過しないことを意味しているのを超えるすべての列挙のプロパティオブジェクト。オブジェクトリストのための

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