필터 방법을 사용한 후 두 배열을 결합

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

나는 내 질문을 명확히하기를 바랍니다. 또한지도 자바 스크립트 방법 으로이 문제를 해결하려고하지만 작동하지 않습니다.

문안 인사,

javascript  arrays  dictionary  filter 
— 수잔 슈레 스타
소스

답변:

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());
스 니펫 확장

— 니힐
소스
대단히 감사합니다. 다양한 답변을 주셔서 감사합니다. 다양한 방법으로 인해이 답변을 수락하고 있습니다. 감사합니다
— Sujan Shrestha
천만에요. @SujanShrestha. 도움이되어서 다행입니다.
— Nikhil
4

맵과 오브젝트 스프레드를 사용하여 두 배열을 결합하십시오.

var newArray = cartProducts.map(cart => ({
  ...cart,
  ...productDetails.find(prod => prod.productID === cart.productID)
}));
— Jaspenlind
소스
답변 주셔서 감사합니다. 매우 감사.
— Sujan Shrestha
천만에요. 프로젝트를 잘 살펴보십시오.
— jaspenlind 23
4

키를 사용하여를 지도 ( ) productDetails로 변환합니다 .productDetailsMapproductID

반복 처리 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()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)
스 니펫 확장

— 아디스
소스
1
답변 주셔서 감사합니다. 매우 감사.
— Sujan Shrestha
3 
cartProducts.map(cartProduct => {
  return {
    ...productDetails.find(product => product.productID === cartProduct.productID),
    "quantity": cartProduct.quantity
  }
});

필요한 경우 일부 널 검사를 수행 할 수 있습니다.

— 아시 쉬 모디
소스
답변 주셔서 감사합니다. 매우 감사.
— 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}
  }
})
— 브 래저
소스
배열 cartProducts에 로컬 코드에 id 요소가 있습니다. 질문을 게시하는 동안 더 명확하게 변경했습니다. 답장을 보내 주셔서 감사합니다.
— 수잔 Shrestha
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.