ফিল্টার পদ্ধতি ব্যবহারের পরে দুটি অ্যারে একত্রিত করুন

Question

আমি কার্টের পৃষ্ঠাটি দেখছি যেখানে পণ্য তালিকাভুক্ত রয়েছে যা কার্টে ব্যবহারকারীদের দ্বারা যুক্ত হয়েছিল stuck আমার দুটি অ্যারে রয়েছে: একটি পণ্যের বিবরণ সহ।

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 এর পণ্যের বিবরণ দেয় i আমি যা চাই তা একটি নতুন অ্যারে যা কার্ট প্রোডাক্টল্ট অ্যারের পরিমাণ বিশিষ্টতা পণ্য বিবরণ অ্যারে যুক্ত করে।

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

খুব বেশি প্রশংশিত. বিভিন্ন উত্তরের জন্য আপনাকে ধন্যবাদ। আমি এই উত্তরটি বিভিন্ন পদ্ধতির কারণে অন্যদের মধ্যে গ্রহণ করছি। আপনাকে ধন্যবাদ

— সুজন শ্রেষ্ঠ

আপনি @ সুজনশ্রেষ্ঠকে স্বাগতম। আমি আনন্দিত এটি সাহায্য করেছে।

— নিখিল

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()যখন পণ্য আইডি মেলে তখন পণ্য-বিবরণ থেকে পণ্য-বিবরণ জোড়া অনুলিপি করতে পদ্ধতি ব্যবহার করতে পারেন :

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

অ্যারে কার্ট প্রোডাক্টসগুলির আমার স্থানীয় কোডে আইডি উপাদান ছিল। প্রশ্ন পোস্ট করার সময় আমি এটি আরও পরিষ্কার করে পরিবর্তন করেছি। এবং আপনার উত্তরের জন্য আপনাকে ধন্যবাদ।

— সুজন শ্রেষ্ঠ