Итерация по структуре JSON: циклы и методы в JavaScript

Быстрый ответ

Для перебора свойств объекта JSON применим цикл for...in. В случае массивов внутри JSON наиболее подходящим является метод forEach:

const jsonObj = { "name": "Alice", "hobbies": ["reading", "gaming"] };

// Произведем исследование персонажа!
for (let prop in jsonObj) {
  console.log(`${prop}: ${jsonObj[prop]}`);
}

// А теперь познакомимся с увлечениями персонажа!
jsonObj.hobbies.forEach(hobby => console.log(hobby));

Цикл for...in возвращает ключи, а метод .forEach() позволяет работать с их значениями. Загадка разгадана! 🕵️‍♂️

Стратегии итерации: ключи, значения и пары

Современный JavaScript предлагает богатые возможности работы с объектами:

• Object.entries(): Идеальный метод для получения пар ключ-значение и итерации с помощью for...of:

const user = { name: "Alice", age: 25 };
// Позвольте нам узнать несколько подробностей о пользователе!
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

• Object.keys() и Object.values(): Определитесь с тем, что вам потребуется — ключи или значения:

// Так мы видим лишь ключи!
Object.keys(user).forEach(key => console.log(key));

// Мы заинтересованы только в значениях!
Object.values(user).forEach(value => console.log(value));

• JSON.parse и JSON.stringify: Преобразование строк в объекты и обратно:

// Сначала код, потом расшифровка!
const jsonString = '{"name":"Alice","age":25}';
const jsonObject = JSON.parse(jsonString); // Декодируем.
const backToString = JSON.stringify(jsonObject); // Возвращаемся к исходному коду.

Выбирайте метод в соответствии с требованиями к производительности и читаемости кода.

Перебор вложенных структур: рекурсия и стек

Если вам необходимо работать с JSON-документами, содержащими вложенные объекты или массивы, выберите подход на основе рекурсии или стека:

Рекурсивный подход

Код, использующий рекурсивную функцию, выглядит элегантно:

// Погружаемся вглубь данных до самого конца!
function iterateJSON(json) {
  if (typeof json === 'object' && json !== null) {
    for (const key in json) {
      console.log(`Key: ${key}`);
      iterateJSON(json[key]); // Идем дальше!
    }
  } else {
    console.log(`Value: ${json}`);
  }
}

Подробнее об этом расскажет наш спикер на видео

Итерация на основе стека

Если необходимо избежать чрезмерной глубины рекурсии, используйте итерацию на основе стека:

// Оснащаемся стеком и начинаем обход объекта!
function iterateJSONStack(json) {
  const stack = [json];
  while (stack.length) {
    const item = stack.pop();
    if (typeof item === 'object' && item !== null) {
      for (const k in item) {
        console.log(`Key: ${k}`);
        stack.push(item[k]);
      }
    } else {
      console.log(`Value: ${item}`);
    }
  }
}

Визуализация

Структуру JSON можно наглядно представить в виде дерева, где вспомогательные объекты или массивы являются ветвями:

🌳 (JSON) Корень
|
|-- 🌿 (Свойство 1: Значение)
|   |-- 🍃 (Вложенное свойство: Значение)
|
|-- 🌿 (Свойство 2: Массив)
|   |-- 🍇 (Элемент массива 0)
|   |-- 🍇 (Элемент массива 1)
|
|-- 🌿 (Свойство 3: Объект)
    |-- 🍃 (Подсвойство: Значение)
    |-- 🍂 (Подсвойство-массив)
        |-- 🍒 (Элемент массива)

Вы станете путешественником, визитером каждого узла, готовым извлекать или изменять значения узлов.

Применение jQuery для работы с JSON

jQuery предоставляет удобный механизм для работы с JSON:

• $.each(): Удобный перебор элементов c помощью callback-функции:

// Просим jQuery перебрать элементы коллекции.
$.each(jsonObj, (key, value) => {
  console.log(key, value);
});

• $.parseJSON(): В случаях, когда строкам JSON не стоит абсолютно доверять:

// Есть подозрения насчет строк? jQuery вам в помощь!
const jsonObject = $.parseJSON('{"name":"Alice","age":25}');

Помните, что если ваш проект не использует jQuery, то стоит отдать предпочтение встроенным методам JavaScript.

Отладка с помощью JSON.stringify

Иногда ошибки скрываются в структурных нюансах. JSON.stringify() с параметрами форматирования поможет вывести их на свет:

// Теперь вы в моих руках, ошибка!
console.log(JSON.stringify(jsonObject, null, 2));

Такой подход позволит в красивом формате вывести JSON с отступами в два пробела, что улучшит восприятие данных.

Полезные материалы

1. Работа с JSON – MDN – Компетентный гид по миру JSON.
2. JSON.parse() – Учебник W3Schools – Углубленный материал по парсингу JSON.
3. Литералы JSON – W3Schools – Понимание и разъяснение концепции объектных литералов JSON.
4. Объекты на JavaScript.info – Раскрытие тайн работы объектов в JavaScript.
5. Как использовать Google Sheets в качестве источника JSON – Креативный урок по использованию Google Sheets для работы с JSON.
6. Изучение JavaScript на Codecademy — Интерактивный курс обучения языку JavaScript.
7. Работа с JSON в JavaScript – DigitalOcean – Детальное руководство по использованию JSON.