Filtering array, help

JavaScript
1

I am going to try to explain this as simple as possible. I am trying to filter an array (data) and return or push the filtered data to a new filtered array (filteredData). This is an example of how I am doing it:

let filteredData = [];
console.log(filteredData);

$('.categories__link').click(function() {
  const category = this.id;
  let filteringData;

  if (category === 'bottoms') {
    filteringData = data.filter(el => el.category === 'bottoms');
  } else if (category === 'tops') {
    filteringData = data.filter(el => el.category === 'tops');
  } else if (category === 'outwear') {
    filteringData = data.filter(el => el.category === 'outwear');
  }

  console.log(filteringData);
  Array.prototype.push.apply(filteredData, filteringData);

});

When I test it in the console, it doesn’t look as expected:

33%20PM
33%20PM1191×238 55.6 KB

It says it’s an array and it shows the filtered data, but it doesn’t look like an array, is this a bug in the console or am I doing something wrong? I ask this because it’s not showing me the number of objects in the array like the one below “Live reload enabled.” text, plus if I open it (in the console) to see if there’s any data and I keep clicking different sections, it won’t add any more data.

This is the html structure for better understanding:

   <section class="products-container container">
      <nav class="categories">
        <span class="categories__link" id="accessories">Accessories</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"></div>
      <div class="products accessories"></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>

The data:

const data = [
  {
    product: "Haori Jacket",
    url: "haorijacket.html",
    image: "img/haori-jacket.jpg",
    altDesc: "Jacket",
    price: "$210.00",
    category: "outwear"
  },
  {
    product: "Swing Dress",
    url: "swingdress.html",
    image: "img/swing-dress.jpg",
    altDesc: "Dress",
    price: "$218.00",
    category: "dresses"
  },
  {
    product: "Lounge Jumpsuit",
    url: "",
    image: "img/lounge-jumpsuit.jpg",
    altDesc: "Jumpsuit",
    price: "$298.00",
    category: "dresses"
  },
  {
    product: "Linen Top",
    url: "",
    image: "img/linen-top.jpg",
    altDesc: "Blouse",
    price: "$125.00",
    category: "tops"
  },
  {
    product: "Lounge Tunic",
    url: "",
    image: "img/lounge-tunic.jpg",
    altDesc: "Dress",
    price: "$258.00",
    category: "dresses"
  },
  {
    product: "Sonia Dress",
    url: "",
    image: "img/sonia-dress.jpg",
    altDesc: "Dress",
    price: "$268.00",
    category: "dresses"
  },
  {
    product: "White Studio Top",
    url: "",
    image: "img/white-studio-top.jpg",
    altDesc: "Blouse",
    price: "$158.00",
    category: "tops"
  },
  {
    product: "Swing Top",
    url: "",
    image: "img/swing-top.jpg",
    altDesc: "Blouse",
    price: "$128.00",
    category: "tops"
  },
  {
    product: "Terra Cota Studio Top",
    url: "",
    image: "img/terracota-studio-top.jpg",
    altDesc: "Blouse",
    price: "$158.00",
    category: "tops"
  },
  {
    product: "Wide Pant",
    url: "",
    image: "img/wide-pant.jpg",
    altDesc: "Pants",
    price: "$190.00",
    category: "bottoms"
  },
  {
    product: "Charcoal Long Shorts",
    url: "",
    image: "img/charcoal-long-shorts.jpg",
    altDesc: "Pants",
    price: "$200.00",
    category: "bottoms"
  },
  {
    product: "Linen Long Shorts",
    url: "",
    image: "img/linen-long-shorts.jpg",
    altDesc: "Pants",
    price: "$200.00",
    category: "bottoms"
  },
  {
    product: "Diana Jacket",
    url: "",
    image: "img/diana-jacket.jpg",
    altDesc: "Jacket",
    price: "$368.00",
    category: "outwear"
  },
  {
    product: "Poplin Chef Shirt",
    url: "",
    image: "img/poplin-chef-shirt.jpg",
    altDesc: "Shirt",
    price: "$216.00",
    category: "tops"
  },
  {
    product: "Poplin Dress",
    url: "",
    image: "img/poplin-dress.jpg",
    altDesc: "Dress",
    price: "$231.00",
    category: "dresses"
  },
  {
    product: "Layer Dress",
    url: "",
    image: "img/layer-dress.jpg",
    altDesc: "Dress",
    price: "$309.00",
    category: "dresses"
  },
  {
    product: "Poplin V Top",
    url: "",
    image: "img/poplin-vtop.jpg",
    altDesc: "Blouse",
    price: "$143.00",
    category: "tops"
  },
  {
    product: "3 Button Tunic",
    url: "",
    image: "img/3button-tunic.jpg",
    altDesc: "Blouse",
    price: "$250.00",
    category: "dresses"
  },
  {
    product: "Charcoal Tunic",
    url: "",
    image: "img/charcoal-tunic.jpg",
    altDesc: "Blouse",
    price: "$250.00",
    category: "dresses"
  },
  {
    product: "Dusty Jumpsuit",
    url: "",
    image: "img/dusty-jumpsuit.jpg",
    altDesc: "Jumpsuit",
    price: "$299.00",
    sale: "$399.00",
    category: "dresses"
  },
  {
    product: "Jacky Trousers",
    url: "",
    image: "img/jacky-trousers.jpg",
    altDesc: "Pants",
    price: "$228.00",
    category: "bottoms"
  },
  {
    product: "Lisa Shirt",
    url: "",
    image: "img/lisa-shirt.jpg",
    altDesc: "Shirt",
    price: "$253.00",
    category: "tops"
  },
  {
    product: "Jane Skirt",
    url: "",
    image: "img/jane-skirt.jpg",
    altDesc: "Shirt",
    price: "$150.00",
    sale: "$263.00",
    category: "bottoms"
  },
  {
    product: "Romy Top",
    url: "",
    image: "img/romy-top.jpg",
    altDesc: "Blouse",
    price: "$199.00",
    sale: "$300.00",
    category: "tops"
  },
  {
    product: "Romy Trousers",
    url: "",
    image: "img/romy-trousers.jpg",
    altDesc: "Pants",
    price: "$250.00",
    sale: "$310.00",
    category: "bottoms"
  },
  {
    product: "Twiggy Dress",
    url: "",
    image: "img/twiggy-dress.jpg",
    altDesc: "Dress",
    price: "$200.00",
    category: "dresses"
  },
  {
    product: "Sonia Skirt",
    url: "",
    image: "img/sonia-skirt.jpg",
    altDesc: "Skirt",
    price: "$228.00",
    category: "bottoms"
  },
  {
    product: "Duo-tone Backpack",
    url: "",
    image: "img/duotone-backpack.jpeg",
    altDesc: "Backpack",
    price: "$420.00",
    category: "accessories"
  },
  {
    product: "Black Backpack",
    url: "",
    image: "img/black-backpack.jpeg",
    altDesc: "Backpack",
    price: "$420.00",
    category: "accessories"
  },
  {
    product: "Bucket Tote",
    url: "",
    image: "img/bucket-tote.jpeg",
    altDesc: "Backpack",
    price: "$500.00",
    category: "accessories"
  },
  {
    product: "Black Crossbody",
    url: "",
    image: "img/black-crossbody.jpeg",
    altDesc: "Backpack",
    price: "$175.00",
    sale: "$250.00",
    category: "accessories"
  },
  {
    product: "Tan Crossbody",
    url: "",
    image: "img/tan-crossbody.jpeg",
    altDesc: "Backpack",
    price: "$175.00",
    sale: "$250.00",
    category: "accessories"
  },
  {
    product: "Black Tote",
    url: "",
    image: "img/black-tote.jpeg",
    altDesc: "Backpack",
    price: "$350.00",
    sale: "$475.00",
    category: "accessories"
  },
  {
    product: "Tan Tote",
    url: "",
    image: "img/tan-tote.jpeg",
    altDesc: "Backpack",
    price: "$350.00",
    sale: "$475.00",
    category: "accessories",
  },
  {
    product: "Sunglasses Nº 1",
    url: "",
    image: "img/sunglasses-n1.jpeg",
    altDesc: "Sunglasses",
    price: "$125.00",
    category: "accessories"
  },
  {
    product: "Sunglasses Nº 2",
    url: "",
    image: "img/sunglasses-n2.jpeg",
    altDesc: "Sunglasses",
    price: "$125.00",
    category: "accessories"
  },
  {
    product: "Sunglasses Nº 3",
    url: "",
    image: "img/sunglasses-n3.jpeg",
    altDesc: "Sunglasses",
    price: "$125.00",
    category: "accessories"
  },
  {
    product: "Sunglasses Nº 4",
    url: "",
    image: "img/sunglasses-n4.jpeg",
    altDesc: "Sunglasses",
    price: "$125.00",
    category: "accessories"
  }
];
3

If I expand the button to see what’s inside the array and I click another section then it won’t add any more filtered data, I am not sure if this is a bug or there’s something wrong with the code. I could make a codepen with this code just for testing purposes, would that be enough?

5

Ok, let me do the pen. Thanks btw @camperextraordinaire for all your help.

6

Please let me know if you need anything else in the Pen.

8

Umm that’s weird, because I’m checking the pen and it’s showing the problem. What is it that you see? I added a small change in the function:

let filteredData = [];
console.log(filteredData);

$('.categories__link').click(function() {
  const category = this.id;
  //let filteringData;

  // Get filtered array
// I added this for loop, but you can comment it out and use the code below instead, because that's the one I used for my original post.
  for(var i = 0; i < data.length; i++) {
   
    if (data[i].category === category) {
      filteredData.push(data[i]);
    }
  };

// This was the code I used for the original post.

  // if (category === 'bottoms') {
  //   filteringData = data.filter(el => el.category === 'bottoms');
  // } else if (category === 'tops') {
  //   filteringData = data.filter(el => el.category === 'tops');
  // } else if (category === 'outwear') {
  //   filteringData = data.filter(el => el.category === 'outwear');
  // }

  //console.log(filteringData);
  //Array.prototype.push.apply(filteredData, filteringData);

});
10

This is what I see:

47%20PM
47%20PM1190×553 110 KB

This shows that I clicked the “Tops” button in the navigation.

If you use the code from the original post, there’s a variable “filteringData” that you need to comment out too, it’s right below const category = this.id;

By the way @camperextraordinaire, you need to click one of the buttons in the navigation BEFORE expanding the array in the console, otherwise it won’t add any data and that’s one of the problems that I have, which I don’t know why it’s happening :confused:

12

It’s all good, however I hope you understand what I am trying to explain now, because it’s a bit tricky. I don’t know which code you are using (the original or the new one I added) but both present similar issues. To show any data in the filtered array you must click on one of the buttons in the navigation before expanding the array, once you expand the array in the console it won’t get any more data even if you click another button in the nav, I don’t know if this a bug in the console or there’s something wrong with the code. This is not letting me test properly, I hope you can tell me what’s going on here because I am lost.

14

Ok, If I am not mistaken you are using the code here correct?

let filteredData = [];
console.log(filteredData);

$('.categories__link').click(function() {
  const category = this.id;
  let filteringData;

  if (category === 'bottoms') {
    filteringData = data.filter(el => el.category === 'bottoms');
  } else if (category === 'tops') {
    filteringData = data.filter(el => el.category === 'tops');
  } else if (category === 'outwear') {
    filteringData = data.filter(el => el.category === 'outwear');
  }

  console.log(filteringData);
  Array.prototype.push.apply(filteredData, filteringData);

});

If you are using this code, try expanding the empty array before clicking any buttons in the navigation and you will see that nothing is added to it when you click a button and I don’t know why it’s doing that.

16

Ok, but that empty array is supposed to update whenever I click a button in the navigation, because the function runs when I click a button, filter the data and then push the filtered data to the empty array. It seems like there’s something I’m not seeing here.

Going off of that, you see the way filteringData is behaving every time I click a button?, it shows an array with new objects depending where I click. I’d like to use that new generated array somewhere else out of that particular function, that’s why I was tried using the push method. But my logic failed, because filteredData is not behaving as I thought.