फ़िल्टर विधि का उपयोग करने के बाद दो सरणियों को मिलाएं

Question

मैं कार्ट पेज दिखा रहा हूं जहां उत्पाद सूचीबद्ध हैं जो उपयोगकर्ताओं द्वारा कार्ट में जोड़े गए थे। मेरे पास दो सरणियाँ हैं: एक उत्पाद विवरण के साथ।

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

कार्ट उत्पाद विवरण के साथ एक और जो केवल उपयोगकर्ताओं द्वारा चयनित उत्पाद और मात्रा है।

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

मैंने उन सभी उत्पादों को फ़िल्टर किया है जो उपयोगकर्ता ने चुने हैं।

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

यह फ़ंक्शन उत्पाद 1 और 3 के उत्पाद विवरण देता है। मैं जो चाहता हूं वह एक नया सरणी है जो कार्टप्रोडक्ट्स सरणी की मात्रा विशेषता को उत्पाद विवरण सरणी में जोड़ता है।

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

मुझे उम्मीद है कि मैंने अपने सवालों को स्पष्ट कर दिया है। मैं इस समस्या को मैप जावास्क्रिप्ट विधि से हल करने की कोशिश कर रहा हूं लेकिन इसका काम नहीं हो रहा है।

सादर,

Answer 1

आप प्रत्येक आइटम के बाद मानचित्र () का उपयोग कर सकते हैं 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());

Comments

बहुत ज्यादा अधिमूल्यित। विभिन्न प्रकार के उत्तर के लिए धन्यवाद। मैं इसके विभिन्न तरीकों के कारण दूसरों के बीच इस उत्तर को स्वीकार कर रहा हूं। धन्यवाद

— सुजान श्रेष्ठ

आपका @SujanShrestha में स्वागत है। मुझे खुशी है कि इसने मदद की।

— निखिल

Answer 2

दो सरणियों के संयोजन के लिए मानचित्र और ऑब्जेक्ट प्रसार का उपयोग करें:

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

Comments

आपके उत्तर के लिए धन्यवाद। बहुत सराहना की।

— सुजान श्रेष्ठ

आपका स्वागत है। अपने प्रोजेक्ट के साथ अच्छा लुक।

— जसपेंलिंड

Answer 3

कन्वर्ट 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)

Comments

स्वच्छ कोड के लिए धन्यवाद। आपका जवाब इतना साफ और सरल है। धन्यवाद

— सुजान श्रेष्ठ

Answer 4

आप इसके समान कुछ आज़मा सकते हैं:

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

उम्मीद है की यह मदद करेगा :)

Comments

आपके उत्तर के लिए धन्यवाद। बहुत सराहना की।

— सुजान श्रेष्ठ

Answer 5

आप Object.assign()जब भी 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)

Comments

आपके उत्तर के लिए धन्यवाद। बहुत सराहना की।

— सुजान श्रेष्ठ

Answer 6

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

यदि आवश्यक हो तो आप कुछ अशक्त जांच कर सकते हैं।

Comments

आपके उत्तर के लिए धन्यवाद। बहुत सराहना की।

— सुजान श्रेष्ठ

Answer 7

यह वही है जो आपके कोड के साथ गड़बड़ कर रहा है:

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

Comments

मेरे स्थानीय कोड में ऐरे कार्टप्रॉडक्ट्स में id एलिमेंट था। प्रश्न पोस्ट करते समय मैंने इसे और अधिक स्पष्ट कर दिया। और आपके उत्तर के लिए धन्यवाद।

— सुजान श्रेष्ठ