Kết hợp hai mảng sau khi sử dụng phương pháp lọc

Tôi bị kẹt khi hiển thị trang giỏ hàng nơi các sản phẩm được liệt kê đã được Người dùng thêm vào Giỏ hàng. Tôi có hai mảng: Một với các chi tiết sản phẩm.

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
            }
          ],

Một chi tiết khác với Giỏ hàng Sản phẩm có chỉ số ID sản phẩm và số lượng người dùng chọn.

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

Tôi đã lọc tất cả các sản phẩm mà người dùng đã chọn.

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

Hàm này cung cấp chi tiết sản phẩm của ProductID 1 và 3. Điều tôi muốn là một mảng mới bổ sung thuộc tính số lượng của mảng cartSản phẩm vào mảng ProductDetails.

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

Tôi hy vọng tôi đã làm cho câu hỏi của tôi rõ ràng. Tôi cũng đang cố gắng giải quyết vấn đề này bằng phương pháp javascript bản đồ nhưng nó không hoạt động.

Trân trọng,

Bạn có thể sử dụng map () sau filter()và thêm thuộc quantitytính cho mỗi mục.

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());

Hoặc bạn có thể sử dụng giảm () .

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());

Bạn cũng có thể sử dụng map()trên 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());

Sử dụng bản đồ và đối tượng trải rộng để kết hợp hai mảng:

var newArray = cartProducts.map(cart => ({
  ...cart,
  ...productDetails.find(prod => prod.productID === cart.productID)
}));

Chuyển đổi productDetailsđến một Map ( productDetailsMap), sử dụng productIDnhư chìa khóa.

Lặp lại cartProductsvới Array.map()lấy sản phẩm hiện tại từ productDetailsMapnó productIDvà hợp nhất bằng cách lây lan vào một đối tượng mới.

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)

Bạn có thể thử một cái gì đó tương tự như thế này:

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

Hi vọng điêu nay co ich :)

Bạn có thể sử dụng Object.assign()phương pháp để sao chép các cặp giá trị thuộc tính từ ProductDetails vào cartSản phẩm bất cứ khi nào sản phẩm khớp với:

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)

cartProducts.map(cartProduct => {
  return {
    ...productDetails.find(product => product.productID === cartProduct.productID),
    "quantity": cartProduct.quantity
  }
});

Bạn có thể làm một số kiểm tra null nếu cần thiết.

Đây là những gì đang gây rối với mã của bạn ở đây:

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

fđó là một cartProductsmặt hàng không có tài sản id.

Tôi nghĩ những gì bạn có nghĩa là f.productIDthay vào đó.

Bây giờ đây là một cách để thêm thuộc quantitytính bằng cách sử dụng mapchức năng:

this.productDetails = cartItemDetails().map((element) => {
  for (let e of this.cartProducts) {
    if (e.productID === element.productID) return {...element, quantity: e.quantity}
  }
})