在這里，我在另一個陣列“cart”中取了一個名為“cardItem”的陣列。現在，我想映射“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>
)
}uj5u.com熱心網友回復：
基于以下假設“購物車”是一個陣列，
- 'cart' 陣列有多個元素，每個元素都是一個物件
- 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 ?? 0
}
/* <tr>
<td></td>
<td>
<img src={item.image} alt="如何在反應js中映射來自兩個嵌套陣列的資料？" 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));
console.log('as a flat array: ', getAllItems(cart).flat());解釋
- 首先，遍歷 'cart' 陣列中的每個元素
- 在上面的片段中，每個“cart”陣列元素都使用“cartObj”處理
- 對于購物車陣列中的每個元素，遍歷“cartItem”陣列
- 現在，對于每個“cartItem”（在上面的代碼片段中簡稱為“item”），收集名稱、影像、價格
- 計算cartQuantity（使用'cartObj'的外部迭代）和價格（來自'item'）的乘積
注： ?. 和?? 分別是可選鏈和空值合并運算子。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/406692.html
標籤：
上一篇：如何在discord.py中找到同一個mongodb條目的不同部分
下一篇：查找和更新動態值MongoDB