CODEWITHSUNDEEP
javascriptjquery
Gilbert R.
Gilbert R.

Reputation: 292

Filter array of objects based on the objects attributes

I would like to filter an array of objects based on the objects attributes. Let me show you what I mean with the code. First of all I have an array where I store the information of the objects:

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: ""
  }
];

Then dynamically generate a string using a Template Literal with a function:

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

I have a div with the class "all-items" which contain all my objects (38 to be exact) but I also want to divide these objects in categories (accesories, dresses, outwear, etc..). I am trying to do this using the filter method. Here's some images to help clarify the situation: all items accesories section

Basically I'd like to append to my div with the class "accesories" only the objects with the attribute "accesory". How can I do this? Any help is much appreciated!

edit: let me also include the html structure just in case:

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

Upvotes: 0

Views: 105

Answers (2)

vle
vle

Reputation: 1

You can try this:

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

This should be okay for IE9+ and modern browsers.

Upvotes: 0

Ele
Ele

Reputation: 33726

You can use the in operator to check if a specific property exists within an object.

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

Of course, you need to add the necessary if-else-if to add the views to specific divs.

Upvotes: 1

Related Questions