Unable to perform AND Operation on the Product List

Question

I have a project in which i have dummy JSON and wants to perform a dynamic filters.I have implemented the OR logic filter in which the user can filter the products. But iam unable to perform the AND logic between the two atributes.

Example: if i'm tick on Brand: apple, seller: NTC-BLR it must show ony one those product where the both are same but in my case its showing all the products where brand is Apple and Seller is NTC-BLR.

import * as React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import { CardActionArea } from '@mui/material';
import axios from 'axios';
import "../styles/Home.module.css"
import styles from './card.module.css'

export default function CardContainer({filterArray, category}) {

    const [initial, setInitial] = React.useState([])
    const [products, setProducts] = React.useState([]);

    React.useEffect(() => {
        if(!category){
            axios.get('http://localhost:3004/products')
                .then(res => {
                    setProducts(res.data)
                    setInitial(res.data)
                })
                .catch(e => console.log(e))
        } else {
            axios.get(`http://localhost:3004/products?categorie=${category}`)
                .then(res => {
                    setProducts(res.data)
                    setInitial(res.data)
                })
                .catch(e => console.log(e))
        }
    },[category]);

    React.useEffect(() => {
      debugger
      let F_array = [...filterArray]
      let newProdList = []
      let temp_prodList = []
      let temp_prodList_2 = []
      let i = 0;
      console.log(products)

      F_array.map(filterobj => {
        
        if(i === 0){
           temp_prodList = [...products]
        } else {
           temp_prodList = [...temp_prodList_2]
        }

        temp_prodList.map(prodObj => {

            prodObj.attributes.map(attObj => {
                if(attObj.id === filterobj.id) {
                   if(filterobj.value.includes(attObj.value) && !newProdList.includes(prodObj)){
                        newProdList.push(prodObj)
                   }
                }
            }) 
            
        })
        
        console.log(newProdList);
        setInitial(newProdList);
        ++i
        temp_prodList = []
        temp_prodList_2 = newProdList;
      })

    },[filterArray])
    

  if(products.length === 0){
    return <div>Loading...</div>
  }

  return (
    <div className={styles.d}>
      { initial.map(product => {
          return (
                <Card sx={{ maxWidth: 345 }} key={product.id}> 
                    <CardActionArea>
                        <CardContent>
                            <Typography gutterBottom variant="h5" component="div">
                                {product.name}
                            </Typography>
                            <Typography gutterBottom variant="h5" component="div">
                                {product.categorie}
                            </Typography>
                            <Typography gutterBottom variant="h5" component="div">
                                {product.attributes.map(attri => { 
                                    return(
                                        <div key={attri.id}>{`${attri.id}: ${attri.value} `}</div>
                                    )
                                    })
                                }
                            </Typography>
                        </CardContent>
                    </CardActionArea>
                </Card>
          )
      }) 
    }
    </div>  
  );
}

The filterArray is a objects Array:

[ 
 {id: 'Brand', value: Array(1)},
 {id: 'Seller', value: Array(1)}
]

The main filter logic is written in the second useEffect();

Answer 1

Hmmmm this is a bit of an odd one and I actually misunderstood it at first. There are ways to do this but none of them that I can think of are really nice. Personally I think I would so something like

public class Matrix
{
    private List<RowGroup> _groups;

    public Matrix(List<List<int>> matrix)
    { 
        //Removed for simplicity
    }

    public void SortMaxtrixByRow(int rowNumber)
    {
        this._groups.Sort((r1, r2) =>
        {
            return r1.Col[rowNumber].CompareTo(r2.Col[rowNumber]);
        });
    }
    public class RowGroup
    {
        public List<int> Col;
        public RowGroup(List<int> col)
        {
            Col = col;
        }
    }
}

This is doing something similar to your transposing. The main benefit would be that its an object so if you had to do multiple sorts on the same set it wouldn't need to re-transpose it over and over again.

Other than this you could copy the desired array and sort it then compare each value to the original to see how it moved and move the other rows accordingly but that is only assuming that you are using unique values in each row, writing your own sorting algorithm so you could be sure which index, or are okay with there being multiple "correct" answers.