Как сделать логику из общих значений?

Question

[chelkaz]

Может кто сталкивался, например есть варианты:
Элемент 1 имеет: Цвет синий, размер 100м
Элемент 2 имеет: Цвет синий, размер 70м
Элемент 3 имеет: Цвет красный, размер 70м
Элемент 4 имеет: Цвет желтый, размер 50м

Нужно сделать два зависимых списка Цвет и Размер, если я например в первом выберу красный, то во втором Останутся только размер 70, так как красного с другим размером нет, и наоборот, если я выберу размер 70, то в первом останется Синий и Красный, так как они имеют общий размер.

Скажу сразу, что данные я получаю сразу о всех вариантах, но куда их сложить для обработки? В объект?
И как это лучше фильтровать на стороне пользователя?

Answer 1

[Finesse]

Лучше всего применить однонаправленный поток данных.

То есть. Хранить в постоянной памяти только исходный набор данных в виде списка объектов:

var items = [
  {
    color: 'red',
    size: 100
  },
  {
    color: 'blue',
    size: 70
  }
  // и так далее
]

Затем, когда пользователь выбрал какой-нибудь фильтр, например, цвет красный, пройтись по списку items и собрать те значения фильтра "размер", которые встречаются в элементах, которые подходят под фильтр цвета:

var color = 'red';
var availableSizes = [];  // Будет содержать список доступных размеров для красного цвета

items
  // Отсеиваем элементы по фильтру цвета
  .filter( function( item ) { return item.color === color; })
  // Собираем значения фильтра размера для них
  .forEach( function( item ) {
    if ( availableSizes.indexOf( item.size ) === -1 )
      availableSizes.indexOf.push( item.size );
  });

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