使用过滤器方法合并两个数组

9

我停留在显示购物车页面的位置，其中列出了由用户添加到购物车的产品。我有两个数组：一个包含产品详细信息。

productDetails: [
            {
              productID: 1,
              productTitle: 'Product Title 1',
              productPrice: 2000
            },
            {
              productID: 2,
              productTitle: 'Product Title 2',
              productPrice: 5000
            },
            {
              productID: 3,
              productTitle: 'Product Title 3',
              productPrice: 1000
            },
            {
              productID: 4,
              productTitle: 'Product Title 4',
              productPrice: 10000
            }
          ],

另一个带有购物车产品详细信息，其产品ID和数量仅由用户选择。

cartProducts: [
            {
              productID: 1,
              quantity: 5,
            },
            {
              productID: 3,
              quantity: 2,
            }
          ]

我已经过滤掉用户选择的所有产品。

cartItemDetails() {
      return this.productDetails.filter(
        el => this.cartProducts.some(f => f.id === el.productID),
      );
    },

此函数提供productID 1和3的产品详细信息。我想要的是一个新数组，该数组将cartProducts数组的数量属性添加到productDetails数组。

newArray: [
            {
              productID: 1,
              productTitle: 'Product Title 1',
              productPrice: 2000,
              quantity:5
            },
            {
              productID: 3,
              productTitle: 'Product Title 3',
              productPrice: 1000,
              quantity:5
            }
          ]

我希望我已经阐明了我的问题。我也在尝试使用地图javascript方法解决此问题，但无法正常工作。

问候，

javascript  arrays  dictionary  filter 
— 苏安·史瑞莎（Sujan Shrestha）
source

Answers:

3

您可以在之后使用map（）filter()并将quantity属性添加到每个项目。

const productDetails = [{ productID: 1, productTitle: 'Product Title 1', productPrice: 2000 }, { productID: 2, productTitle: 'Product Title 2', productPrice: 5000 }, { productID: 3, productTitle: 'Product Title 3', productPrice: 1000 }, { productID: 4, productTitle: 'Product Title 4', productPrice: 10000 }];
const cartProducts = [{ productID: 1, quantity: 5 }, { productID: 3, quantity: 2 }]; 

function cartItemDetails() {
  return productDetails
    .filter(el => cartProducts.some(f => f.productID === el.productID))
    .map(item => ({
      ...item,
      "quantity": cartProducts.find(f => f.productID === item.productID).quantity
    }));
}

console.log(cartItemDetails());
展开摘要

或者，您可以使用reduce（）。

const productDetails = [{ productID: 1, productTitle: 'Product Title 1', productPrice: 2000 }, { productID: 2, productTitle: 'Product Title 2', productPrice: 5000 }, { productID: 3, productTitle: 'Product Title 3', productPrice: 1000 }, { productID: 4, productTitle: 'Product Title 4', productPrice: 10000 }];
const cartProducts = [{ productID: 1, quantity: 5 }, { productID: 3, quantity: 2 }]; 

function cartItemDetails() {
  return productDetails.reduce((acc, curr) => {
    let item = cartProducts.find(f => f.productID === curr.productID);

    if (item) {
      acc.push({ ...curr,
        "quantity": item.quantity
      });
    }

    return acc;
  }, []);
}

console.log(cartItemDetails());
展开摘要

您也可以map()在上使用cartProducts。

const productDetails = [{ productID: 1, productTitle: 'Product Title 1', productPrice: 2000 }, { productID: 2, productTitle: 'Product Title 2', productPrice: 5000 }, { productID: 3, productTitle: 'Product Title 3', productPrice: 1000 }, { productID: 4, productTitle: 'Product Title 4', productPrice: 10000 }];
const cartProducts = [{ productID: 1, quantity: 5 }, { productID: 3, quantity: 2 }]; 

function cartItemDetails() {
  return cartProducts.map(item => ({
    ...productDetails.find(f => f.productID === item.productID),
    ...item
  }));
}

console.log(cartItemDetails());
展开摘要

— 尼基尔
source
非常感谢。感谢您提供不同的答案。由于其方法多种多样，我接受这一答案。谢谢
— Sujan Shrestha
不客气@SujanShrestha。我很高兴它有所帮助。
— Nikhil
4

使用地图和对象展开组合两个数组：

var newArray = cartProducts.map(cart => ({
  ...cart,
  ...productDetails.find(prod => prod.productID === cart.productID)
}));
— 贾斯彭林德
source
谢谢您的回答。非常感激。
— Sujan Shrestha
别客气。您的项目外观不错。
— jaspenlind
4

使用键将转换productDetails为Map（productDetailsMap）productID。

反复调整cartProducts与Array.map()从获得当前的产品productDetailsMap通过它productID，并通过合并蔓延到一个新的对象。

const productDetails = [{"productID":1,"productTitle":"Product Title 1","productPrice":2000},{"productID":2,"productTitle":"Product Title 2","productPrice":5000},{"productID":3,"productTitle":"Product Title 3","productPrice":1000},{"productID":4,"productTitle":"Product Title 4","productPrice":10000}]
const cartProducts = [{"productID":1,"quantity":5},{"productID":3,"quantity":2}]

const productDetailsMap = new Map(productDetails.map(o => [o.productID, o]))

const result = cartProducts.map(o => ({
  ...productDetailsMap.get(o.productID),
  ...o
}))

console.log(result)
展开摘要

— 奥里·德罗里（Ori Drori）
source
1
谢谢您的干净代码。您的答案是如此简洁明了。谢谢你
— 舒扬什雷斯塔
3

您可以尝试类似以下操作：

cartItemDetails() {
    return this.cartProducts.map(cp => {
         let prod = this.productDetails.find(pd => pd.productID === cp.productID)
         return {...cp, ...prod}
    })
}

希望这可以帮助 ：）

— 罗森
source
谢谢您的回答。非常感激。
— Sujan Shrestha
3

Object.assign()只要productID匹配，就可以使用method将属性值对从productDetails复制到cartProducts中：

let productDetails = [
            {
              productID: 1,
              productTitle: 'Product Title 1',
              productPrice: 2000
            },
            {
              productID: 2,
              productTitle: 'Product Title 2',
              productPrice: 5000
            },
            {
              productID: 3,
              productTitle: 'Product Title 3',
              productPrice: 1000
            },
            {
              productID: 4,
              productTitle: 'Product Title 4',
              productPrice: 10000
            }
          ];

let cartProducts = [
            {
              productID: 1,
              quantity: 5,
            },
            {
              productID: 3,
              quantity: 2,
            }
          ];
cartProducts.map(cart => Object.assign(cart, productDetails.find(product => product.productID === cart.productID))  )
console.log(cartProducts)
展开摘要

— 亚的斯
source
1
谢谢您的回答。非常感激。
— Sujan Shrestha
3 
cartProducts.map(cartProduct => {
  return {
    ...productDetails.find(product => product.productID === cartProduct.productID),
    "quantity": cartProduct.quantity
  }
});

如果需要，您可以做一些空检查。

— 阿什什·莫迪（Ashish Modi）
source
谢谢您的回答。非常感激。
— Sujan Shrestha
3

这就是在这里弄乱您的代码：

cartItemDetails() {
      return this.productDetails.filter(
        el => this.cartProducts.some(f => f.id === el.productID),
      );
    },

f这是一个cartProducts没有属性的项目id。

我认为您的意思是f.productID相反。

现在，这里是一种quantity使用map函数添加属性的方法：

this.productDetails = cartItemDetails().map((element) => {
  for (let e of this.cartProducts) {
    if (e.productID === element.productID) return {...element, quantity: e.quantity}
  }
})
— 布拉泽
source
数组cartProducts在我的本地代码中具有id元素。发布问题时，我将其更改为更清楚。并感谢您的回答。
— Sujan Shrestha
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.