寻找过滤对象数组的条件答案

【问题标题】：Looking for a condition to filter an array of objects寻找过滤对象数组的条件
【发布时间】：2016-06-02 14:40:04
【问题描述】：

我正在尝试构建一个基于某些复选框显示对象的通用过滤器模块。到目前为止，我能够在其他 stackoverflow 成员的帮助下构建颜色部分。检查或未选中彩色复选框时显示所需的对象。现在我希望能够根据它们的大小显示所需的对象，但我找不到任何条件。在代码中读取 cmets。

var DATABASE = [
    {id:0, color:'green',  size:'L',   collarType:'regular',  cap:false, sleeves:'short', price: 35,   availability: true},
    {id:1, color:'red',    size:'XL',  collarType:'scoop',    cap:false, sleeves:'long',  price: 40,   availability: false},
    {id:2, color:'blue',   size:'M',   collarType:'turtle',   cap:false, sleeves:'3/4',   price: 45,   availability: true},
    {id:3, color:'red',    size:'XXL', collarType:'scoop',    cap:true,  sleeves:'3/4',   price: 25,   availability: false},
    {id:4, color:'red',    size:'L',   collarType:'regular',  cap:true,  sleeves:'short', price: 40,   availability: true},
    {id:5, color:'green',  size:'S',   collarType:'regular',  cap:false, sleeves:'short', price: 70,   availability: false},
    {id:6, color:'yellow', size:'L',   collarType:'v-neck',   cap:true,  sleeves:'short', price: 25,   availability: true}
];
var selection = DATABASE;

document.addEventListener('DOMContentLoaded', function() {

  const mainContent = document.querySelector('main');

  // COLOR CHECKBOXES
  const chbBlueColor = document.querySelector('#blue-color-filter');
  const chbRedColor = document.querySelector('#red-color-filter');
  const chbGreenColor = document.querySelector('#green-color-filter');
  const chbYellowColor = document.querySelector('#yellow-color-filter');

  // SIZE CHECKBOXES
  const chbXxlSize = document.querySelector('#size-xxl');

  function applyFilter() {

    function filterFn(obj) {
      return (chbBlueColor.checked || obj.color !== "blue") &&
        (chbRedColor.checked || obj.color !== "red") &&
        (chbGreenColor.checked || obj.color !== "green") &&
        (chbYellowColor.checked || obj.color !== "yellow")
        // if 2XL checkbox is checked and no other checkboxes are checked, show all available objects that has a size property = XXL
        // if some other checkboxes are already checked, show objects that has a size property = XXL based on those checked items
    }

    selection = DATABASE.filter(filterFn);

    mainContent.innerHTML = JSON.stringify(selection);

  }


  // COLOR EVENT LISTENERS
  chbBlueColor.addEventListener('change', applyFilter);
  chbRedColor.addEventListener('change', applyFilter);
  chbGreenColor.addEventListener('change', applyFilter);
  chbYellowColor.addEventListener('change', applyFilter);

  // SIZE EVENT LISTENERS
  chbXxlSize.addEventListener('change', applyFilter);
});

section > div {
  margin: 5px;
  padding: 10px;
  display: inline-block;
  background-color: #e4e4e4;
}
H4 {
  border-bottom: 1px solid;
}
label {
  font-size: 14px;
}

<body>
  <section>
    <div class="color-filter">
      <H4>COLOR</H4>
      <input type="checkbox" id="all-colors">
      <label for="all-colors">All</label>
      <input type="checkbox" id="blue-color-filter">
      <label for="blue-color-filter">Blue</label>
      <input type="checkbox" id="red-color-filter">
      <label for="red-color-filter">Red</label>
      <input type="checkbox" id="green-color-filter">
      <label for="green-color-filter">Green</label>
      <input type="checkbox" id="yellow-color-filter">
      <label for="yellow-color-filter">Yellow</label>
    </div>

    <div class="size-filter">
      <H4>SIZE</H4>
      <input type="checkbox" id="all-sizes">
      <label for="all-sizes">All</label>
      <input type="checkbox" id="size-xxl">
      <label for="size-xxl">2XL</label>
      <input type="checkbox" id="size-xl">
      <label for="size-xl">XL</label>
      <input type="checkbox" id="size-l">
      <label for="size-l">L</label>
      <input type="checkbox" id="size-m">
      <label for="size-m">M</label>
      <input type="checkbox" id="size-s">
      <label for="size-s">S</label>
    </div>

    <div class="collar-and-cap-filter">
      <div class="collar-filter">
        <h4>COLLAR</h4>
        <input type="checkbox" id="all-collars">
        <label for="all-collars">All</label>
        <input type="checkbox" id="collar-regular">
        <label for="collar-regular">Regular</label>
        <input type="checkbox" id="collar-scoop">
        <label for="collar-scoop">Scoop</label>
        <input type="checkbox" id="collar-turtle">
        <label for="collar-turtle">Turtle</label>
        <input type="checkbox" id="collar-vneck">
        <label for="collar-vneck">V-neck</label>
      </div>
      <div class="cap-filter">
        <input type="checkbox" id="all-caps">
        <label for="all-caps">All</label>
        <input type="checkbox" id="cap available">
        <label for="cap available">Cap</label>
        <input type="checkbox" id="cap-unavailable">
        <label for="cap-unavailable">No cap</label>
      </div>
    </div>

    <div class="availability-filter">
      <input type="checkbox" id="availability">
      <label for="availability">Only Available Products</label>
    </div>
  </section>
</body>

【问题讨论】：

尽量将您的问题隔离到最低限度。如果您在孤立的情况下理解它，那么只有返回并尝试将其整合到它的上下文中。
正如@Jieter 所写，仅提供完整代表特定问题所需的内容。另外，不要在代码 cmets 中提供问题的描述。最后，你说“我找不到任何条件”是什么意思？你试过写一个吗？结果如何？
因此，阅读您的帖子，您正在通过提出一系列问题来“编写”您的应用程序，这样您就不必学习任何东西，社区可以投入时间来设计您的应用？更好的是，您建议我们阅读代码中的 cmets……您能说明您为自己解决这个问题付出了哪些努力吗？
@Icepickle 不要评判我。我只是 JavaScript 世界和 stackoverflow 的新手。我花了一天时间试图解决这个问题。我不能，我发布了一个问题
html 标记中没有
标签

标签： javascript arrays filter

【解决方案1】：

如果您了解您为颜色问题所做的工作，那么其余部分基本相同：我知道您想要一个与选中的每个选项相对应的选择。

尝试调整您为颜色创建的过滤器，然后将其应用于选择（而不是数据库），这样，您将过滤已过滤颜色的大小对象（因此它们将匹配两个选项)。

（您可以注意到这里的顺序并不重要，除了一个非常大的数据库：您将尝试预测哪个选项会消除更多的对象并首先过滤这些选项）

【讨论】：

@Icepickle ，即使我读过 Stack Overflow 已经有一段时间了，我在回答问题方面还是很陌生...感谢这个提示！