Javascript 基于对象属性筛选对象数组

我想根据对象属性过滤对象数组。让我告诉你我的代码是什么意思。首先，我有一个存储对象信息的数组：

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))
}

//模板文本
功能clothingView（项目、索引）{
返回(`
`);
};
//将模板文本追加到html结构
对于（变量i=0；i

我有一个“all items”类的div，它包含我的所有对象（确切地说是38个），但我也想将这些对象划分为类别（附件、连衣裙、外衣等）。我正在尝试使用过滤器方法来实现这一点。以下是一些有助于澄清情况的图片：

基本上，我想在我的div中添加类“accesory”，只添加属性为“accesory”的对象。我该怎么做？非常感谢您的帮助

编辑：我还要包括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>

附件
屁股
连衣裙+连体衣
外衣
最上等的
-出售

您可以使用操作符检查对象中是否存在特定属性

如果指定的属性位于指定的对象或其原型链中，则中的

操作符将返回
true

var allItems=$（'div.all-items'）；
var accesoryItems=$（'div.accesories'）；
对于（变量i=0；i

当然，您需要添加必要的
if-else if
以将视图添加到特定的div。
您可以尝试以下方法：

function filterItems(itemType) {
    return data.filter(function(i) {return i[itemType] !== undefined});
}

这对于IE9+和现代浏览器应该没问题。
Hey@Ele，你能详细说明你的答案吗，我不太明白你的意思。
for（var I=0；I
与上面的代码一起使用“all items”容器中的某些项由于某种原因而丢失，我不知道为什么。我希望所有项也都在该容器中。我只是想澄清一下，对于（var I=0；I

您的代码当然没有问题，它只是与else if语句冲突，因为一个对象由于其属性可能位于不同的部分。

function filterItems(itemType) {
    return data.filter(function(i) {return i[itemType] !== undefined});
}