[英]how to separate each object output using map method - React.js
I have this code structure:我有这个代码结构:
[
[
{ title: 'McRoyale', price: 70, count:5, totalPrice: 350 },
{ title: 'Big Mac', price: 55, count:1, totalPrice: 55 },
],
[
{ title: 'Double Big Tasty', price: 99, count:2, totalPrice: 198 },
],
[
{ title: 'Grand Chicken Premier', price: 72, count:3, totalPrice: 216 },
{ title: 'Spicy Chicken Fillet', price: 60, count:2, totalPrice: 120 },
]
]
array of three arrays -maybe more or less than three it's dynamic number- each one of these arrays consists of arrays of objects三个数组 arrays - 可能多于或少于三个它是动态数字 - 这些 arrays 中的每一个都由 arrays 个对象组成
I wrote this code:我写了这段代码:
<thead>
<tr>
<th scope='col'>Items</th>
<th scope='col'>Total Items Price</th>
</tr>
</thead>
<tbody>
{cardItems.map((items) =>
items.map((item) => (
<tr>
<td>
<b>Item:</b> {item.title}, <b>Item Price:</b> {item.price},{' '}
<b>Item Count:</b>
{item.count}, <b>Item Total Price:</b> {item.totalPrice}
</td>
</tr>
))
)}
</tbody>
</table>
and I got this output:我得到了这个 output:
but this is not the output I needed, I need each inner array to be in one not each item alone, I want to separate it by objects, like this:但这不是我需要的 output,我需要每个内部数组都在一个而不是每个项目中,我想按对象将其分开,如下所示:
each object together in one row.每个 object 排成一排。
Try This尝试这个
<tbody>
{cardItems.map((items) => (
<tr>
<td>
{items.map((item) => (
<>
<b>Item:</b> {item.title}, <b>Item Price:</b> {item.price},{" "}
<b>Item Count:</b>
{item.count}, <b>Item Total Price:</b> {item.totalPrice}{" "}
</>
))}
</td>
</tr>
))}
</tbody>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.