Filtering array, help

Filtering array, help
0

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


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

#2

Expand the bottom array out so you can see what is inside of it. Do you have a link to this code?


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


#4

Yes, I think I need to test the code for myself.


#5

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


#6

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


#7

With the code you put in the pen (even if I uncomment the one part) I am not seeing anything close to what you posted in the screenshot. Maybe you did not post everything in the code?


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

});

#9

When I run the code currently in your pen right now, I see


#10

This is what I see:

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 @RandellDawson, 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:


#11

I appologize that I did not realize you clicked on anything particular to get something in the console. I did not study the code, I just immediately looked into the console. When I uncomment out all commented code, I now get the following. I expanded the first 5 array elements to see what was in side of them.


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


#13

I just tried your current codepen again and if I open the console and click Tops first, then Bottoms, and then Outwear, three different arrays get displayed.


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


#15

Yes, I am testing the same code. There is an empty array, because you declare an empty array and then console.log it. This happens before any buttons are clicked.

Not sure what you are expecting to see, but if you add a console.log(filteredData) after the apply method line, you will see that filteredArray gets new elements each time something is clicked.

FYI - you could accomplish the same thing that apply is doing with:

filteredData = filteredData.concat(filteringData);

OR

filteredData = [...filteredData, ...filteringData];

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