รวมสองอาร์เรย์หลังจากใช้วิธีการกรอง


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

อีกรายการหนึ่งที่มีรายละเอียดผลิตภัณฑ์รถเข็นซึ่งมี productID และปริมาณที่เลือกโดยผู้ใช้เท่านั้น

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

ฉันหวังว่าฉันได้ทำให้คำถามของฉันชัดเจน ฉันยังพยายามที่จะแก้ปัญหานี้ด้วยวิธีการจาวาสคริปต์แผนที่ แต่มันไม่ทำงาน

ความนับถือ,

คำตอบ:


3

คุณสามารถใช้map () after 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());

หรือคุณสามารถใช้ลด ()

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


ชื่นชมมาก ขอบคุณสำหรับคำตอบที่หลากหลาย ฉันยอมรับคำตอบนี้เนื่องจากวิธีการที่หลากหลาย ขอบคุณ
Sujan Shrestha

คุณยินดีต้อนรับ @SujanShrestha ฉันดีใจที่มันช่วย
Nikhil

4

ใช้การกระจายแผนที่และวัตถุเพื่อรวมสองอาร์เรย์:

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

ขอบคุณสำหรับคำตอบ. ชื่นชมมาก
Sujan Shrestha

ไม่เป็นไร ดูดีกับโครงการของคุณ
jaspenlind

4

แปลงproductDetailsเป็นแผนที่ ( 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)


1
ขอบคุณสำหรับรหัสสะอาด คำตอบของคุณสะอาดและเรียบง่าย ขอบคุณ
Sujan Shrestha

3

คุณสามารถลองสิ่งที่คล้ายกับสิ่งนี้:

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

หวังว่าจะช่วย :)


ขอบคุณสำหรับคำตอบ. ชื่นชมมาก
Sujan Shrestha

3

คุณสามารถใช้Object.assign()วิธีการคัดลอกคู่ค่าคุณสมบัติจาก productDetails ไปยัง cartProducts เมื่อใดก็ตามที่ productID ตรงกัน:

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)


1
ขอบคุณสำหรับคำตอบ. ชื่นชมมาก
Sujan Shrestha

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

คุณสามารถตรวจสอบ null ได้หากจำเป็น


ขอบคุณสำหรับคำตอบ. ชื่นชมมาก
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}
  }
})

ตะกร้าสินค้าผลิตภัณฑ์มีองค์ประกอบรหัสในรหัสท้องถิ่นของฉัน ในขณะที่โพสต์คำถามฉันเปลี่ยนมันให้ชัดเจนยิ่งขึ้น และขอบคุณสำหรับคำตอบของคุณ
Sujan Shrestha
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.