Javascript: непонимание зацикливания на ассоциативном массиве

Question

У меня есть объект JSON (это то, что, как я думал, я определил), и я пытаюсь получить доступ к значениям массива в нем. Это повторяется три раза, что правильно, но значение img.iName всегда undefined

Что я неправильно понял?

<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>

javascript json for-in-loop

0

mcl 27 Авг 2017 в 11:12

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);
}

1

user94559 27 Авг 2017 в 08:19

Answer 2

Циклы for ... in перебирают ключи , поэтому в массиве это будет

 0,1,2

И эти числа не имеют имени. Вы можете перебрать значения с помощью цикла for..of:

for(var img of gallery.imgs)

1

Jonas Wilms 27 Авг 2017 в 08:24

Answer 3

Вы должны использовать цикл for ... of / forEach / for вместо цикла for..in, который вы использовали.

Чтобы быстро продемонстрировать разницу между циклом 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
}

Это означает, что он не будет проходить через элементы массива, которые вы хотели, а через все перечисляемые свойства объекта. (в JavaScript все переменные являются объектами)

Я бы посоветовал вам пойти с чем-то вроде:

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

1

Robin F. 27 Авг 2017 в 08:28

Javascript: непонимание зацикливания на ассоциативном массиве

3 ответа

Новые вопросы

javascript