javascript - 根据对象属性过滤对象数组

Question

我想根据对象属性过滤对象数组。让我向您展示代码的含义。首先，我有一个数组，用于存储对象的信息:

var data = [
  {
    product: "Haori Jacket",
    url: "haorijacket.html",
    image: "img/haori-jacket.jpg",
    altDesc: "Jacket",
    price: "$210.00",
    outwear: ""
  },
  {
    product: "Swing Dress",
    url: "swingdress.html",
    image: "img/swing-dress.jpg",
    altDesc: "Dress",
    price: "$218.00",
    dress: ""
  },
  {
    product: "Tan Tote",
    url: "",
    image: "img/tan-tote.jpeg",
    altDesc: "Backpack",
    price: "$350.00",
    sale: "$475.00",
    accessory: ""
  },
  {
    product: "Sunglasses Nº 1",
    url: "",
    image: "img/sunglasses-n1.jpeg",
    altDesc: "Sunglasses",
    price: "$125.00",
    accessory: ""
  },
  {
    product: "Sunglasses Nº 2",
    url: "",
    image: "img/sunglasses-n2.jpeg",
    altDesc: "Sunglasses",
    price: "$125.00",
    accessory: ""
  }
];

然后使用带有函数的模板文字动态生成字符串:

 // Template literal
    function clothingView(item, index) {
      return (`
        <a href="${item.url}" class="shop-item">
        ${item.sale ? `<span class="shop-item__sale">Sale</span>`: ''}
          <img data-src=${item.image} alt="${item.altDesc}" class="shop-item__img">
          <div class="quickview">
            <span class="quickview__icon">Quick View</span>
            <span class="quickview__info">${item.product}
              <br>
              <span class="quickview__price">${item.price}
                ${item.sale ? `<span class="quickview__price--sale">${item.sale}</span>`: ''}
              </span>
            </span>
            <span class="shop-item__index">${index}</span>
          </div>
        </a>
        `);
    };

// Append template literal to html structure
for (var i = 0; i < data.length; ++i) {
  $('.all-items').append(clothingView(data[i], i))
}

我有一个“all-items”类的 div，其中包含我的所有对象(确切地说是 38 个)，但我也想将这些对象划分为类别(配饰、连衣裙、外套等)。我正在尝试使用过滤方法来做到这一点。以下是一些有助于澄清情况的图像:

基本上，我想仅将具有“accesory”属性的对象附加到“accesories”类的 div 中。我怎样才能做到这一点？非常感谢任何帮助!

编辑:让我也包括 html 结构以防万一:

<section class="products-container container">
      <nav class="categories">
        <span class="categories__link" id="accesories">Accesories</span>
        <span class="categories__link" id="bottoms">Bottoms</span>
        <span class="categories__link" id="dresses">Dresses + Jumpsuits</span>
        <span class="categories__link" id="outwear">Outerwear</span>
        <span class="categories__link" id="tops">Tops</span>
        <span class="categories__link" id="sale">— Sale</span>
      </nav>
      <div class="products all-items">
        <!-- <a href="haorijacket.html" class="shop-item">
          <span class="shop-item__sale">Sale</span>
          <img src=img/haori-jacket.jpg alt="Jacket" class="shop-item__img">
          <div class="quickview">
            <span class="quickview__icon">Quick View</span>
            <span class="quickview__info">$Haori Jacket
              <br>
              <span class="quickview__price">$210.00<span class="quickview__price--sale">$150.00<span></span>
            </span>
            <span class="clothing-index">${index}</span>
          </div>
        </a> -->
      </div>
      <div class="products accesories"></div>
      <div class="products bottoms"></div>
      <div class="products dresses"></div>
      <div class="products outwear"></div>
      <div class="products tops"></div>
      <div class="products sale"></div>
    </section>

Answer 1

您可以使用in 运算符检查对象中是否存在特定属性。

The in operator returns true if the specified property is in the specified object or its prototype chain.

var allItems = $('div.all-items');
var accesoryItems = $('div.accesories');
for (var i = 0; i < data.length; ++i) {
    var clothingView = clothingView(data[i], i);
    if ('accessory' in data[i]) accesoryItems.append(clothingView);
    else allItems.append(clothingView);
}

当然，您需要添加必要的 if-else-if 将 View 添加到特定的 div。