Как поправить фильтр для списка категорий с множеством подкатегорий?

Question

[sergey]

Есть динамический список тегов (категории и подкатегории)

и есть код который фильтрует этот список но не корректно

function course_curriculum_source() {
          var current_curriculum = $('.course-curriculum').data('taggle').getTags().values;
          <% if cache_course_curriculum_tags && cache_curriculum_subcategories_hash %>
            var curriculum_tree = <%= cache_course_curriculum_tags.map { |s| [{label: s, value: 'subject'}, {label: s, value: s}, (cache_curriculum_subcategories_hash[s] || []).map {|ss| {label: ss, value: ss} } ] }.flatten.to_json.html_safe %>;
              curriculum_tree = _.filter(curriculum_tree, function (val) {
                  return val.value == 'subject' || current_curriculum.indexOf(val.label) == -1
              });
            $($('.course-curriculum').data('taggle').getInput()).autocomplete('option', 'source', curriculum_tree)
          <% end %>
        }
course_curriculum_source();

масив:

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-3" tabindex="0">
<li class="ui-menu-item autocomplete-subject" id="ui-id-1630" tabindex="-1">Apologia</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1631" tabindex="-1">Apologia</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1632" tabindex="-1">Exploring Creation with Biology</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1633" tabindex="-1">Exploring Creation with Physical Science</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1634" tabindex="-1">General Science</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1635" tabindex="-1">Beautiful Feet</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1636" tabindex="-1">Beautiful Feet</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1637" tabindex="-1">Canon Press</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1638" tabindex="-1">Canon Press</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1639" tabindex="-1">Introductory Logic - The Fundamentals of Thinking Well</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1640" tabindex="-1">Classical Academic Press</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1641" tabindex="-1">Classical Academic Press</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1642" tabindex="-1">The Art of Argument</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1643" tabindex="-1">Classical Conversations</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1644" tabindex="-1">Classical Conversations</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1645" tabindex="-1">Challenge 1</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1646" tabindex="-1">Challenge 2</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1647" tabindex="-1">Challenge 3</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1648" tabindex="-1">Challenge 4</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1649" tabindex="-1">Challenge A</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1650" tabindex="-1">Challenge B</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1651" tabindex="-1">Essentials</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1652" tabindex="-1">Foundations</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1653" tabindex="-1">Dr. Jay Wile</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1654" tabindex="-1">Dr. Jay Wile</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1655" tabindex="-1">Discovering Design with Chemistry</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1656" tabindex="-1">Henle Latin</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1657" tabindex="-1">Henle Latin</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1658" tabindex="-1">Latin 1</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1659" tabindex="-1">Latin 2</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1660" tabindex="-1">IEW</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1661" tabindex="-1">IEW</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1662" tabindex="-1">Following Narnia® Volume 2: Aslan's Country</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1663" tabindex="-1">Medieval History</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1664" tabindex="-1">Intermediate Logic</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1665" tabindex="-1">Intermediate Logic</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1666" tabindex="-1">Introductory Logic</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1667" tabindex="-1">Introductory Logic</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1668" tabindex="-1">Logic of English</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1669" tabindex="-1">Logic of English</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1670" tabindex="-1">Logic of English C</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1671" tabindex="-1">Lost Tools of Writing</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1672" tabindex="-1">Lost Tools of Writing</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1673" tabindex="-1">Math U See</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1674" tabindex="-1">Math U See</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1675" tabindex="-1">AIM</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1676" tabindex="-1">Math U See Alpha</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1677" tabindex="-1">Math U See Beta</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1678" tabindex="-1">Math U See Geometry</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1679" tabindex="-1">Math U See Pre-Algebra</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1680" tabindex="-1">Math U See: Zeta</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1681" tabindex="-1">Math U See Algebra 2</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1682" tabindex="-1">Memoria Press</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1683" tabindex="-1">Memoria Press</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1684" tabindex="-1">Notgrass</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1685" tabindex="-1">Notgrass</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1686" tabindex="-1">Notgrass Exploring Government</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1687" tabindex="-1">Saxon Math</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1688" tabindex="-1">Saxon Math</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1689" tabindex="-1">Saxon Advanced Math</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1690" tabindex="-1">Saxon Algebra</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1691" tabindex="-1">Saxon Algebra 1/2</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1692" tabindex="-1">Shormann</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1693" tabindex="-1">Shormann</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1694" tabindex="-1">Shormann Algebra  1</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1695" tabindex="-1">Shormann Algebra  2</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1696" tabindex="-1">Shormann Algebra 2 with Integrated Geometry</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1697" tabindex="-1">Singapore Math</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1698" tabindex="-1">Singapore Math</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1699" tabindex="-1">2B US Edition</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1700" tabindex="-1">5B US Edition</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1701" tabindex="-1">Teaching Textbooks</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1702" tabindex="-1">Teaching Textbooks</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1703" tabindex="-1">Veritas Press</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1704" tabindex="-1">Veritas Press</li>
</ul>

в чем проблема: cейчас фильтр работает странно, к примеру если ввести INT то должны отфильтроваться все теги подкатегории которые включают в себе эти буквы и вывестись вместе со своими категориями (к которым они относяться)
но вот что мы имеем:

первая категория пропала и есть только подкатегория, а нужно выводить для подкатегории и ее категорию (в данном случае это Cannon Press )
Думаю что проблема вот тут:

return val.value == 'subject' || current_curriculum.indexOf(val.label) == -1

но как правильно прописать не приходит в голову? Буду благодарен за любой совет и подсказку! Спасибо!

Comments

[Дмитрий Гололобов]

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

[sergey]

Дмитрий Гололобов https://jsfiddle.net/sergsagan/frgptoce/

[N. Bekseitov]

А какое значение возвращает переменная curriculum_tree после маппинга? По скрину кажется, что условие val.value == 'subject' не работает, поэтому фильтруется и основная категория.

[sergey]

N. Bekseitov, консоль лог дает такой результат

[N. Bekseitov]

Вроде все норм. Попробуйте поменять местами строки val.label и current_curriculum. Вы ищите строку внутри подстроки.

return val.value == 'subject' || val.label.indexOf(current_curriculum) !== -1

Ну а далее проверьте в консоли значение curriculum_tree до и после фильтрации

[sergey]

N. Bekseitov, результат не поменялся - в консоли значение одинаковые что до фильтрации что после

[N. Bekseitov]

Странно, вот пример на основе вашего кода, и там все работает
https://jsfiddle.net/u52qevoc/

[sergey]

N. Bekseitov, значения label корректные а вот value в группы label должно быть одинаковое

[sergey]

N. Bekseitov, но если прописать вот так

var curriculum_tree = <%= cache_course_curriculum_tags.map { |s| [{label: s, value: 'subject'}, {label: s, value: s}, (cache_curriculum_subcategories_hash[s] || []).map {|ss| {label: ss, value: ss} } ] }.flatten.to_json.html_safe %>;
              curriculum_tree = _.filter(curriculum_tree, function (val) {
                  return val.value == 'subject' || val.label.indexOf(current_curriculum) !== -1
              });

то работает не корректно - первая выбранная подкатегория без категории

[sergey]

N. Bekseitov, если current_curriculum = 'int' то выводиться только первая категория в консоли а не все что есть в массиве

[{
  label: "integer",
  value: "b"
}, {
  label: "canon",
  value: "subject"
}, {
  label: "Apologia",
  value: "subject"
}]

[sergey]

N. Bekseitov, вот как это выглядит в Redis

Rails.cache.write("COURSE_CURRICULUM_TAGS", ["Apologia", "Beautiful Feet", "Canon Press", "Classical Academic Press", "Classical Conversations", "Dr. Jay Wile", "Henle Latin", "IEW", "Intermediate Logic", "Introductory Logic", "Logic of English", "Lost Tools of Writing", "Math U See", "Memoria Press", "Notgrass", "Saxon Math", "Shormann", "Singapore Math", "Teaching Textbooks", "Veritas Press"])
Rails.cache.write("CURRICULUM_SUBCATEGORIES_HASH", {
    "Apologia" => ["Exploring Creation with Biology", "Exploring Creation with Physical Science", "General Science"],
    "Canon Press" => ["Introductory Logic - The Fundamentals of Thinking Well"],
    "Classical Academic Press" => ["The Art of Argument"],
    "Classical Conversations" => ["Challenge 1", "Challenge 2", "Challenge 3", "Challenge 4", "Challenge A", "Challenge B", "Essentials", "Foundations"],
    "Dr. Jay Wile" => ["Discovering Design with Chemistry"],
    "Henle Latin" => ["Latin 1", "Latin 2"],
    "IEW" => ["Following Narnia® Volume 2: Aslan's Country", "Medieval History"],
    "Logic of English" => ["Logic of English C"],
    "Math U See" => ["AIM", "Math U See Alpha", "Math U See Beta", "Math U See Geometry", "Math U See Pre-Algebra", "Math U See: Zeta", "Math U See Algebra 2"],
    "Notgrass" => ["Notgrass Exploring Government"],
    "Saxon Math" => ["Saxon Advanced Math", "Saxon Algebra", "Saxon Algebra 1/2"],
    "Shormann" => ["Shormann Algebra  1", "Shormann Algebra  2", "Shormann Algebra 2 with Integrated Geometry"],
    "Singapore Math" => ["2B US Edition", "5B US Edition"]
})

[N. Bekseitov]

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

var curriculum_tree = [{label: 'integer', value: 'b', parent: {label: 'canon', value: 'canon'}, {label: 'Apologia', value: 'Apologia', parent: {label: 'canon', value: 'canon'}}];

curriculum_tree.forEach(function(cat) {
  if (cat.value != 'subject' || cat.label.indexOf(current_curriculum) !== -1) {
    cats.push(cat.parent);
    cats.push(cat);
  }
});