Issues Filtering Data After API call

1

Let me start off by saying that any help will be much appreciated. I have been stuck for almost a week on this issue. I need some sense of directions with this. Thank you so much in advance :).

I am currently having issues with filtering data after an api call.

Before I learned Nodejs I model the data base with a simple variable which held all the data. You can simply click on any category and the click on filter which is at the bottom of the page (red button), and the filtered products will be rendered (the following is the sandbox):

codesandbox .io/s/cranky-meadow-35z94

After I learned Node, I created a database to hold all the data. The example of that sandbox will be below:

codesandbox .io/s/pensive-browser-vylk2

Specifically, what is not being filtered is the gender option (on the second sandbox).

Here is my function:

`handleFormSubmit = (event) => { 

    //event.preventDefault();      

    const selectedSizes = [...this.selectedCheckboxes];      


    let shallowCopy = [...this.state.products];       

    let filteredProducts = shallowCopy.filter(product =>   
         selectedSizes.every(size =>                                              
     product.stock.some(s => s.stock > 0 && s.size === size) 
    ) );        

    let filteredGender = filteredProducts.filter(product =>          
        { 
            return product.gender.some((item, idx, arr) => {              
          return item[this.selectedGender] === false ? null : product; 
         }); 
    });        

    let filteredData = filteredGender.filter(product => {          
        return product.brand.includes(this.state.activeBrand);      
    });           

    let sortedPrice = filteredData.sort((a, b) => {          
        return this.state.sortBy === "min" ? a.price - b.price                 :                                   
        b.price - a.price;     
     });       

    this.setState(prevState => ({                      
        products: sortedPrice             
     }) }; `

The filtering part of the functions is:

let filteredGender = filteredProducts.filter(product =>{     
     return product.gender.some((item, idx, arr) =>{          
    return item[this.selectedGender] === false ? null : product;      
    }); 
 });

I believe there might be an issue with the life cycle method that I am using or perhaps I am using too many filters. I would appreciate if anyone can provide some input. Perhaps a code example of filtering after an api call.

Please let me know if you need more information or perhaps more code snippets or perhaps pictures of the state.

2

If you’re in control of the database, why are you doing complex filtering on the frontend?

3

Hi i clean your code a little:

`handleFormSubmit = (event) => {

//event.preventDefault();      


const filteredProducts = this.state.products.filter(product =>   
     this.selectedCheckboxes.every(size =>                                              
 product.stock.some(s => s.stock > 0 && s.size === size) 
) );        

const filteredGender = filteredProducts.filter(product =>          
    { 
        return product.gender.some((item, idx, arr) => {              
      return item[this.selectedGender] === false ? null : product; 
     }); 
});        

const filteredData = filteredGender.filter(product => {          
    return product.brand.includes(this.state.activeBrand);      
});           

let sortedPrice = filteredData.sort((a, b) => {          
    return this.state.sortBy === "min" ? a.price - b.price                 :                                   
    b.price - a.price;     
 });       

this.setState(prevState => ({                      
    products: sortedPrice             
 }) }; `

You should make one filter with all your conditions instead to take a copy from a copy from a copy haha.
Stop to create many varaibles everywhere.
Also when you filter and map it creates a new array, so no need to create another copy.

4

for this one you should keep simplier also:

const filteredGender = filteredProducts.filter(product =>{
return product.gender.some((item, idx, arr) => item[this.selectedGender] );
});
But I have feeling this one would be better for you:
const filteredGender = filteredProducts.filter(product =>product.gender.includes(item[this.selectedGender] ));

If filter shows no value it would be empty array. No need to add false.

To conclude: all conditions in one filter, show array as result and delete all your variables.

5

Hey Dan, I am sorry I miss your reply. I am learning Node still and don’t consider myself to be great at it yet. But I was able to fix it by the way. All I needed to do was use async await. Thanks for your help!