Проверка формата данных

Проверка формата данных в Slim Select строится вокруг строгого соответствия структуры входных опций ожидаемой модели компонента. Любое отклонение от заданного формата приводит к некорректному отображению списка, потере состояния выбранных элементов или сбоям при инициализации.

Основной формат данных, используемый Slim Select, представляет собой массив объектов, где каждый объект описывает одну опцию:

[
  { text: 'Москва', value: 'msk' },
  { text: 'Санкт-Петербург', value: 'spb' }
]

Ключевыми полями выступают:

text — отображаемое значение в интерфейсе value — уникальный идентификатор опции

Именно эта пара определяет корректность отображения и выбора значений. Отсутствие одного из полей нарушает целостность данных.

Дополнительно могут использоваться:

  • selected — состояние выбора по умолчанию
  • disabled — блокировка опции
  • html — кастомная разметка отображения
  • data — произвольные пользовательские метаданные

Пример расширенной структуры:

[
  {
    text: 'Москва',
    value: 'msk',
    selected: true,
    disabled: false,
    data: { region: 'central' }
  }
]

Валидация обязательных полей

Проверка формата начинается с контроля наличия обязательных ключей. На уровне подготовки данных логика сводится к проверке двух условий:

  1. Наличие поля text
  2. Наличие поля value
function validateOptions(options) {
  return options.every(item =>
    typeof item.text === 'string' &&
    typeof item.value === 'string'
  );
}

При нарушении этих условий Slim Select может некорректно отобразить элементы или вовсе игнорировать часть массива.

Проверка уникальности значений

Поле value должно быть уникальным в пределах одного набора данных. Повторяющиеся значения приводят к конфликту выбора и некорректному обновлению состояния.

function hasUniqueValues(options) {
  const set = new Set();
  for (const item of options) {
    if (set.has(item.value)) return false;
    set.add(item.value);
  }
  return true;
}

Дублирование значений особенно критично при динамической подгрузке данных, где объединяются несколько источников.

Контроль типов данных

Slim Select ожидает строго строковые значения для text и value. Передача чисел или объектов без преобразования может приводить к неявным ошибкам.

Типовая нормализация:

function normalizeOptions(options) {
  return options.map(item => ({
    text: String(item.text),
    value: String(item.value)
  }));
}

Приведение типов на этапе подготовки данных снижает вероятность ошибок при рендеринге и поиске элементов.

Обработка вложенных групп

Поддержка группировки опций требует отдельного формата, где используется структура с вложенным массивом:

[
  {
    label: 'Европа',
    options: [
      { text: 'Германия', value: 'de' },
      { text: 'Франция', value: 'fr' }
    ]
  }
]

Проверка корректности групп включает:

  • наличие поля label
  • наличие массива options
  • валидность каждой вложенной опции
function validateGroups(groups) {
  return groups.every(group =>
    typeof group.label === 'string' &&
    Array.isArray(group.options) &&
    validateOptions(group.options)
  );
}

Ошибки в групповой структуре часто приводят к полной потере отображения блока.

Проверка кастомных полей

Slim Select допускает расширение структуры через произвольные поля, однако они не должны конфликтовать с базовой схемой. На практике используется отдельный слой проверки пользовательских данных.

function validateCustomData(item) {
  return item.data === undefined || typeof item.data === 'object';
}

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

Защита от некорректных значений

Дополнительный уровень контроля связан с фильтрацией пустых и недопустимых значений:

  • пустые строки в value
  • null или undefined
  • дублирующиеся отображаемые значения без уникального value
function isValidItem(item) {
  if (!item) return false;
  if (typeof item.text !== 'string' || !item.text.trim()) return false;
  if (typeof item.value !== 'string' || !item.value.trim()) return false;
  return true;
}

Такая фильтрация выполняется до передачи данных в инициализацию компонента.

Валидация при динамической загрузке

При использовании асинхронных источников данных контроль формата становится критически важным, так как структура не фиксирована заранее. В таких случаях применяется промежуточная нормализация ответа:

async function fetchOptions() {
  const response = await fetch('/api/options');
  const data = await response.json();

  return normalizeOptions(
    data.filter(isValidItem)
  );
}

Динамическая подгрузка требует обязательной фильтрации даже при доверенных источниках данных, поскольку API может изменять структуру ответа.

Обработка некорректных данных в рантайме

В процессе работы компонента возможны ситуации, когда в массив попадают некорректные элементы. Для предотвращения разрушения состояния используется защитная проверка:

function safeInit(options) {
  const safeOptions = options
    .filter(isValidItem)
    .filter(item => typeof item.value === 'string');

  return safeOptions;
}

Подобный подход предотвращает аварийные состояния при обновлении списка.

Согласованность состояния выбранных значений

При проверке формата данных важно учитывать синхронизацию с текущим состоянием выбора. Если выбранное значение отсутствует в списке опций, оно должно быть либо удалено из состояния, либо переинициализировано.

function syncSelected(options, selectedValues) {
  const values = new Set(options.map(o => o.value));
  return selectedValues.filter(v => values.has(v));
}

Несогласованность данных приводит к визуальным ошибкам и невозможности восстановления состояния после перерисовки.

Итоговая модель проверки

Полный цикл проверки формата данных включает последовательные этапы:

  • нормализация входной структуры
  • проверка обязательных полей
  • контроль типов данных
  • проверка уникальности value
  • валидация групп
  • фильтрация некорректных элементов
  • синхронизация состояния выбора

Такая многоуровневая система обеспечивает стабильную работу Slim Select даже при работе с динамическими или внешними источниками данных, где структура не гарантируется заранее.

Оглавление