フィルター法を使用した後、2つの配列を組み合わせる

9

ユーザーによってカートに追加された製品が一覧表示されているカートページが表示されたままになっています。2つのアレイがあります。1つは製品の詳細です。

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メソッドでこの問題を解決しようとしていますが、機能しません。

よろしく、

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

マップとオブジェクトスプレッドを使用して、2つの配列を結合します。

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()メソッドを使用して、productIDが一致する場合は常に、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
  }
});

必要に応じて、いくつかの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}
  }
})
— ブラザー
ソース
配列cartProductsのローカルコードにid要素がありました。質問を投稿する際に、より明確になるように変更しました。そして、答えてくれてありがとう。
— Sujan Shrestha
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.