I am trying to use Javascript to filter two array of object with different length, but resulted unsuccessful. Please help if you see this post :)

Two array of objects are as follow, notice the length of productList will always be larger or equals to shoppingCart.

I'd like to filter out the object with same size and color. I'm wondering if I need to loop through two array of objects before filtering.

First List- productList

let productList= [
    {
        "color_code": "DDFFBB",
        "size": "S",
        "stock": 3
    },
    {
        "color_code": "DDFFBB",
        "size": "M",
        "stock": 5
    },
    {
        "color_code": "CCCCCC",
        "size": "S",
        "stock": 4
    },
    {
        "color_code": "CCCCCC",
        "size": "M",
        "stock": 1
    },
    {
        "color_code": "BB7744",
        "size": "S",
        "stock": 2
    },
    {
        "color_code": "BB7744",
        "size": "M",
        "stock": 6
    }
]

Second list

let shoppingCart=[
    {
        "id": 201807202150,
        "color": "DDFFBB",
        "size": "M",
    },
    {
        "id": 201807202150,
        "color": "BB7744",
        "size": "M",
    },
    {
        "id": 201807202150,
        "color": "DDFFBB",
        "size": "S",
    }
]

Expected output

 {
        "color_code": "DDFFBB",
        "size": "S",
        "stock": 3
    },
{
        "color_code": "DDFFBB",
        "size": "M",
        "stock": 5
    },
 {
        "color_code": "BB7744",
        "size": "M",
        "stock": 6
    }

Thanks for your help!!! You will save my day from infinite error.

CodePudding user response：

You can use Array methods to filter the list.

We filter productList with a filter that checks to see whether there is some item in the shopping cart that matches it.

let productList= [
    {
        "color_code": "DDFFBB",
        "size": "S",
        "stock": 3
    },
    {
        "color_code": "DDFFBB",
        "size": "M",
        "stock": 5
    },
    {
        "color_code": "CCCCCC",
        "size": "S",
        "stock": 4
    },
    {
        "color_code": "CCCCCC",
        "size": "M",
        "stock": 1
    },
    {
        "color_code": "BB7744",
        "size": "S",
        "stock": 2
    },
    {
        "color_code": "BB7744",
        "size": "M",
        "stock": 6
    }
];

let shoppingCart=[
    {
        "id": 201807202150,
        "color": "DDFFBB",
        "size": "M",
    },
    {
        "id": 201807202150,
        "color": "BB7744",
        "size": "M",
    },
    {
        "id": 201807202150,
        "color": "DDFFBB",
        "size": "S",
    }
]

const result = productList.filter(
  (product) => shoppingCart.some(
    (item) => item.color == product.color_code && item.size == product.size
  )
);

console.log(result);

CodePudding user response：

You could try this solution:

const productList = [
  { color_code: 'DDFFBB', size: 'S', stock: 3 },
  { color_code: 'DDFFBB', size: 'M', stock: 5 },
  { color_code: 'CCCCCC', size: 'S', stock: 4 },
  { color_code: 'CCCCCC', size: 'M', stock: 1 },
  { color_code: 'BB7744', size: 'S', stock: 2 },
  { color_code: 'BB7744', size: 'M', stock: 6 }
];

const shoppingCart = [
  { id: 201807202150, color: 'DDFFBB', size: 'M' },
  { id: 201807202150, color: 'BB7744', size: 'M' },
  { id: 201807202150, color: 'DDFFBB', size: 'S' }
];

/**
 * Iterate through the productList and find the product that matches the shoppingCart item.
 *
 * @param {object[]} productList
 * @param {object[]} shoppingCart
 * @returns
 */
const getProductStock = (productList, shoppingCart) => {
  const result = [];
  for (let i = 0; i < shoppingCart.length; i  ) {
    const product = productList.find(item => item.color_code === shoppingCart[i].color && item.size === shoppingCart[i].size);
    result.push(product);
  }
  return result;
}

console.log(getProductStock(productList, shoppingCart));

Output

[
  { color_code: 'DDFFBB', size: 'M', stock: 5 },
  { color_code: 'BB7744', size: 'M', stock: 6 },
  { color_code: 'DDFFBB', size: 'S', stock: 3 }
]

CodePudding user response：

You can map every element of shoppingCart with the corresponding in productList like that:

const result = shoppingCart.map((e) => productList.find((element) => element.size == e.size && element.color_code === e.color));

And if you want to remove the duplicate you just have to do:

const unique = new Set(result);

This is the output I have:

[
   {
      "color_code":"DDFFBB",
      "size":"M",
      "stock":5
   },
   {
      "color_code":"BB7744",
      "size":"M",
      "stock":6
   },
   {
      "color_code":"DDFFBB",
      "size":"S",
      "stock":3
   }
]

CodePudding user response：

you can do something like this

const filterProducts = (products, cart) =>
  products.filter(({
    color_code,
    size
  }) => cart.some(c => c.color === color_code && c.size === size))

let productList = [{
    "color_code": "DDFFBB",
    "size": "S",
    "stock": 3
  },
  {
    "color_code": "DDFFBB",
    "size": "M",
    "stock": 5
  },
  {
    "color_code": "CCCCCC",
    "size": "S",
    "stock": 4
  },
  {
    "color_code": "CCCCCC",
    "size": "M",
    "stock": 1
  },
  {
    "color_code": "BB7744",
    "size": "S",
    "stock": 2
  },
  {
    "color_code": "BB7744",
    "size": "M",
    "stock": 6
  }
]

let shoppingCart = [{
    "id": 201807202150,
    "color": "DDFFBB",
    "size": "M",
  },
  {
    "id": 201807202150,
    "color": "BB7744",
    "size": "M",
  },
  {
    "id": 201807202150,
    "color": "DDFFBB",
    "size": "S",
  }
]

const result = filterProducts(productList, shoppingCart)
console.log(result)