如何在反應js中來自兩個嵌套的arrays的map數據？

Question

在這里，我在另一個數組“cart”中取了一個名為“cardItem”的數組。 現在，我想要 map 'cardItem' 數組。

在此處輸入圖像描述

 { cart.cardItem?.map(item =><tr > <td></td> <td> <img src={item.image} alt="" className='cart-image order-image' /> <br /> <small>{item.name}</small> </td> <td>{item.price}</td> <td>{item.cartQuantity}</td> <td>{item.cartQuantity*item.price}</td> </tr> ) }

Answer 1

基於以下假設“購物車”是一個數組，

• 'cart' 數組有多個元素，每個元素都是 object
• cartItem（在每個 cart-array 元素內）是一個數組
• cartItem-array 具有名稱、圖像、價格道具的元素

下面的代碼片段中提供了一種可能的解決方案：

 const cart = [{ cartQuantity: 1, cartItem: [{ name: 'Item Name 01', image: 'someImage.png', price: 25 }, { name: 'Item Name 101', image: 'someImage.png', price: 12 }] }, { cartQuantity: 5, cartItem: [{ name: 'Item Name 02', image: 'someImage.png', price: 10 }] }, { cartQuantity: 1, cartItem: [{ name: 'Item Name 03', image: 'someImage.png', price: 50 }, { name: 'Item Name 101', image: 'someImage.png', price: 18 }] } ]; // 'cart' array has multiple elements each of which is an object // cartItem (within each cart-array element) is an array // cartItem-array has elements that have name, image, price props const getAllItems = (cart = []) => (cart?.map(cartObj => cartObj?.cartItem.map(item => ({ image: item.image, name: item.name, price: item.price, cartQuantity: cartObj.cartQuantity, quantityTimesPrice: cartObj.cartQuantity * item.price } /* <tr> <td></td> <td> <img src={item.image} alt="" className='cart-image order-image' /> <br /> <small>{item.name}</small> </td> <td>{item.price}</td> <td>{cartObj.cartQuantity}</td> <td>{cartObj.cartQuantity*item.price}</td> </tr> */ )))); // the above will return an array-of-array (of objects). If required, use.flat(), to get a simple array of objects instead. // for simplicity in reviewing the results, have returned an object instead of JSX/HTML. console.log(getAllItems(cart));