Filtering an Array with another Array-CodePudding

I'm pretty new to react, and I'm working on a product where I am trying to get the products and their details from my products array with the products within my cart filtered out. I've tried doing this a couple of ways, but I'm struggling to get this to work. I have:

import React, { useEffect } from 'react';
import Product from '../components/Product';
import {Link, useParams } from 'react-router-dom';
import { listProducts } from '../actions/productActions';


 export default function CarouselForProductPage(props) {
    const dispatch = useDispatch();
    const productList = useSelector((state) => state.productList);
    const { loading, error, products } = productList;
    const cart = useSelector((state) => state.cart);
    const { cartItems } = cart;
    useEffect(() =>{
        dispatch(listProducts({}));
    }, [dispatch]);

    
    var cart_ids = cartItems.map(product => ({ _id: product._id }));
     console.log(cart_ids);

    let res = products.filter(x => !cart_ids.includes(x));
    console.log(res);

   var carts = products.filter((x) => x._id !== cart_ids);
   console.log(carts);

    
  return (
    <div>
        
    </div>
  );
}

My cartItems variable is an array of the data of the products in my cart, and cart_ids are the ids associated with those products. The variable products list all of the data associate with each of my products. I'm trying to filter out the products from products that have the ids contained within cart_ids. I have tried doing this two different ways:

let res = products.filter(x => !cart_ids.includes(x));
    console.log(res);

And

   var carts = products.filter((x) => x._id !== cart_ids);
   console.log(carts);

Both of these arrays (res and carts) are giving me results equal to the products array.

I would really appreciate any help or guidance on what I am doing wrong.Thank you!

cart_ids = [
0:
_id: "622ae8d94bee11259a3b1756"
[[Prototype]]: Object
1:
_id: "624bc1a50f91078261ab650d"
[[Prototype]]: Object
]

products = 
[0:
image: "/uploads/2022-03-11T06:15:00.618Zproduct-1.jpg"
name: "Bliss"
price: 40
__v: 5
_id: "622ae8d94bee11259a3b1756"
[[Prototype]]: Object
1:
image: "/uploads/2022-03-12T23:31:14.922Zproduct-2.jpg"
name: "sample name 1647127866131"
price: 30
__v: 1
_id: "622d2d3a4bee11259a3b17ed"
[[Prototype]]: Object
2:
image: "/uploads/2022-04-05T04:12:46.469Zproduct-4.jpg"
name: "sample name 1649131941926"
price: 50
__v: 1
_id: "624bc1a50f91078261ab650d"
[[Prototype]]: Object
3:
image: "/uploads/2022-04-05T04:39:38.449Zproduct-1.jpg"
name: "sample name 1649133566290"
price: 60
__v: 1
_id: "624bc7fe0f91078261ab6529"
[[Prototype]]: Object
4:
image: "/uploads/2022-04-05T04:40:31.140Zproduct-5.jpg"
name: "sample name 1649133604220"
price: 40
__v: 1
_id: "624bc8240f91078261ab6531"]

Result I am trying to get

[[0:
image: "/uploads/2022-03-12T23:31:14.922Zproduct-2.jpg"
name: "sample name 1647127866131"
price: 30
__v: 1
_id: "622d2d3a4bee11259a3b17ed"
[[Prototype]]: Object
1:
image: "/uploads/2022-04-05T04:39:38.449Zproduct-1.jpg"
name: "sample name 1649133566290"
price: 60
__v: 1
_id: "624bc7fe0f91078261ab6529"
[[Prototype]]: Object
2:
image: "/uploads/2022-04-05T04:40:31.140Zproduct-5.jpg"
name: "sample name 1649133604220"
price: 40
__v: 1
_id: "624bc8240f91078261ab6531"]]

CodePudding user response：

cart_ids is an array of objects you need to parse to a string array first to use for includes.

const cardIdOnlyArray = cartIds.map(x => x._id)

const products = [
  {
    image: '/uploads/2022-03-11T06:15:00.618Zproduct-1.jpg',
    name: 'Bliss',
    price: 40,
    __v: 5,
    _id: '622ae8d94bee11259a3b1756',
  },
  {
    image: '/uploads/2022-03-12T23:31:14.922Zproduct-2.jpg',
    name: 'sample name 1647127866131',
    price: 30,
    __v: 1,
    _id: '622d2d3a4bee11259a3b17ed',
  },
  {
    image: '/uploads/2022-04-05T04:12:46.469Zproduct-4.jpg',
    name: 'sample name 1649131941926',
    price: 50,
    __v: 1,
    _id: '624bc1a50f91078261ab650d',
  },
  {
    image: '/uploads/2022-04-05T04:39:38.449Zproduct-1.jpg',
    name: 'sample name 1649133566290',
    price: 60,
    __v: 1,
    _id: '624bc7fe0f91078261ab6529',
  },
  {
    image: '/uploads/2022-04-05T04:40:31.140Zproduct-5.jpg',
    name: 'sample name 1649133604220',
    price: 40,
    __v: 1,
    _id: '624bc8240f91078261ab6531',
  },
]

const cartIds = [
  {
    _id: '622ae8d94bee11259a3b1756',
  },
  {
    _id: '624bc1a50f91078261ab650d',
  },
]

const cardIdOnlyArray = cartIds.map(x => x._id)

const result = products.filter(product => !cardIdOnlyArray.includes(product._id))
console.log(result)

CodePudding user response：

My guess is that in your first example its likely you forgot to include x._id in !cart_ids.includes(x). By looking at the format of the products array defined above, that object should have _id prop present.

So in first case it should work like

let res = products.filter(x => !cart_ids.includes(x._id));

And second case doesn't make much sense since you are comparing an array with property (which is called _id and its likely, a string or number, and it wont work even if its a reference type such as object or array since comparing those data types with strict operator will always return false)