Метод getData

Метод getData() в Slim Select предназначен для получения полного набора данных, которыми управляется экземпляр селекта. Он возвращает структуру, описывающую все доступные элементы выбора, включая активные, неактивные, выбранные и сгруппированные опции.

Основная задача метода — предоставить доступ к внутреннему состоянию списка опций без необходимости напрямую обращаться к DOM-элементам или исходному <select>.

Сигнатура и особенности вызова

Метод вызывается у экземпляра Slim Select:

ss.getData()

Возвращаемое значение — массив объектов, каждый из которых соответствует одной опции (или группе опций, если используются optgroup).

Метод не принимает параметров и не модифицирует состояние компонента.

Структура возвращаемых данных

Каждый элемент массива представляет собой объект, описывающий одну опцию. Типичная структура включает следующие поля:

  • value — значение опции, используемое при отправке формы или программном выборе
  • text — отображаемый текст
  • selected — булево значение, отражающее текущее состояние выбора
  • disabled — признак недоступности опции
  • placeholder — указывает, является ли элемент плейсхолдером (если применимо)
  • data — дополнительный объект с пользовательскими атрибутами (если они были заданы)

Пример возвращаемой структуры:

[
  {
    value: "1",
    text: "JavaScript",
    selected: false,
    disabled: false
  },
  {
    value: "2",
    text: "TypeScript",
    selected: true,
    disabled: false
  }
]

Поведение при различных конфигурациях

Обычный select

В стандартном случае метод возвращает плоский массив объектов, соответствующих <option> элементам.

<select id="langs">
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
</select>
const ss = new SlimSelect({
  select: '#langs'
});

const data = ss.getData();

Результат будет содержать две записи без вложенности.

Множественный выбор (multiple)

При включённом multiple структура данных не меняется, но поле selected становится ключевым для определения выбранных элементов.

const selectedItems = ss.getData().filter(item => item.selected);

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

Optgroup

При использовании группировки (<optgroup>) данные могут возвращаться в иерархическом виде или плоско, в зависимости от версии и конфигурации Slim Select.

Пример HTML:

<select>
  <optgroup label="Frontend">
    <option value="react">React</option>
    <option value="vue">Vue</option>
  </optgroup>
</select>

Пример логической структуры:

[
  {
    label: "Frontend",
    options: [
      { value: "react", text: "React", selected: false },
      { value: "vue", text: "Vue", selected: false }
    ]
  }
]

Отличие от других методов получения данных

getData vs getSelected

getData() возвращает полный набор опций, включая невыбранные.

ss.getData()

getSelected() (или аналогичные методы в зависимости от версии) возвращает только выбранные значения.

ss.getSelected()

Разница принципиальна при работе с большими списками, где важно не перегружать логику фильтрацией на стороне клиента.

getData vs исходный select

getData() оперирует внутренним состоянием Slim Select, которое может отличаться от DOM:

  • опции могут быть динамически добавлены
  • состояние selected синхронизировано с UI
  • учитываются изменения, сделанные через API Slim Select

Прямой доступ к <select>.options не всегда отражает актуальное состояние компонента после инициализации.

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

Анализ состояния формы

Метод часто применяется для валидации или анализа текущего состояния выбора:

const hasSelection = ss.getData().some(item => item.selected);

Синхронизация с внешним состоянием

При использовании state-менеджеров можно преобразовать данные Slim Select в удобный формат:

const state = ss.getData().map(item => ({
  id: item.value,
  title: item.text,
  active: item.selected
}));

Работа с динамическими списками

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

const currentOptions = ss.getData();

const enabledOptions = currentOptions.filter(o => !o.disabled);

Ограничения метода

Метод не предназначен для:

  • изменения данных
  • сохранения состояния
  • прямого редактирования структуры опций

Любые изменения должны выполняться через API Slim Select, иначе внутреннее состояние может рассинхронизироваться с UI.

Особенности производительности

При больших списках (сотни и тысячи элементов) вызов getData() может возвращать значительный объём данных. В таких случаях:

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

Использование в связке с пользовательскими атрибутами

Slim Select позволяет расширять данные через дополнительные поля. Эти поля доступны через getData():

const data = ss.getData();

const withMeta = data.map(item => item.data?.category);

Такой подход используется при сложных интерфейсах, где опции содержат метаинформацию (категории, теги, идентификаторы API и т.д.).

Поведение при отсутствии данных

Если селект не содержит опций, метод возвращает пустой массив:

[]

Это поведение упрощает обработку, так как не требует дополнительных проверок на null или undefined.

Взаимодействие с динамическим обновлением

После операций вроде добавления, удаления или обновления опций через API Slim Select, результат getData() автоматически отражает текущее состояние:

ss.addData([{ text: "New option", value: "new" }]);

const updated = ss.getData();

В таких сценариях метод служит точкой синхронизации состояния компонента и внешней логики.

Оглавление