Перебір обєкта JSON за допомогою циклу for in..

Від автора: у звичайних масивах можна використовувати цикл for. Об’єкти JSON ж відрізняються від звичайних масивів тим, що кожна клітинка містить у собі пару властивість і значення. Щоб отримати ці складові масиву і звертатися до них окремо найчастіше потрібен інший підхід. Цикл for..in – один з таких підходів.

Хорошим прикладом послужить створений мною в попередній статті об’єкт CSS квітів. JSON масив починається так:

var cssColors = {
“aliceblue”: “#f0f8ff”,
“antiquewhite”: “#faebd7”,
“aqua”: “#00ffff”,
“aquamarine”: “#7fffd4”,
“azure”: “#f0ffff”,
…
}

Щоб створити діаграму CSS квітів для тієї статті, мені потрібно було пройти в циклі по об’єкту: іншими словами, отримати перераховані властивості масиву. Це легко можна зробити за допомогою варіації циклу for з частинкою in:

for (var key in cssColors) {
…
}

Змінну key можна назвати як завгодно (будь-яке підходяще слово), в ній буде зберігатися властивість. Для виведення результату в консоль для тесту можна змінити скрипт:

for (var key in cssColors) {
console.log(key)
}

Ви отримаєте наступне:

aliceblue
antiquewhite
aqua
aquamarine
azure
…

Якщо ви хочете додати значення властивості висновок, можна додати кому та об’єкт з ключем:

for (var key in cssColors) {
console.log(key, cssColors[key])
}

Результат:

aliceblue #f0f8ff
antiquewhite #faebd7
aqua #00ffff
aquamarine #7fffd4
azure #f0ffff

На цій основі можна створити майже будь-яку конструкцію: подивіться приклад демо з іменованими CSS квітами на CodePen.

Неправильне використання та можливі обмеження

Особливість циклу for..in в тому, що він може перераховувати успадковані властивості, а не тільки ті, які ви очікуєте побачити в об’єкті. Захиститися від цього можна з допомогою тесту hasOwnProperty:

for (var key in cssColors) {
if (cssColors.hasOwnProperty(key)) {
… do something …
}
}

Дана умова перевіряє, присвоєно властивість безпосередньо об’єкту, і виводить його, якщо воно рідне. У циклу for..in можуть виникнути проблеми з масивами з порожніми слотами. Загальне правило – не варто додавати, видаляти або змінювати властивості в масиві під час його перебору.

JSON масив складається з безлічі об’єктів, і розглядати його потрібно трохи по-іншому. Більш детально про JSON масивах я розповім в наступній статті.