问题描述
我想将数据映射到表中,以便得到表中所示的结果。如果该类别中有子类别,则类别数据应跨行。同样,子类别应根据类别和子子类别跨越。任何人都可以写下函数来映射 React.js 中的相同内容。我提供 JSON 以供参考,如果您相应地修改 JSON 就可以了。这是 JSON。
[
{
"category_id": 6,"parent_id": null,"name": "Western Wear","slug": "western-wear","sort_order": 0,"subCategoryData": [
{
"category_id": 7,"parent_id": 6,"name": "Jumpsuite and Rompers","slug": "jumpsuite-and-rompers","subSubCategoryData": [
{
"category_id": 10,"parent_id": 7,"name": "Rompers","slug": "rompers","sort_order": 0
},{
"category_id": 11,"name": "Jumpsuite","slug": "jumpsuite","sort_order": 0
}
]
},{
"category_id": 8,"name": "Dresses","slug": "dresses","subSubCategoryData": [
{
"category_id": 9,"parent_id": 8,"name": "Dress","slug": "dress","sort_order": 0
}
]
}
]
},{
"category_id": 7,"subCategoryData": [
{
"category_id": 10,"subSubCategoryData": []
},{
"category_id": 11,"subSubCategoryData": []
}
]
},{
"category_id": 8,"subCategoryData": [
{
"category_id": 9,{
"category_id": 9,"subCategoryData": []
}
]
<table className="admin-table">
<thead className="tbl-head">
<tr className="tbl-head-raw">
{/* <th>Gender</th> */}
<th>Category</th>
<th> Sub-Category</th>
<th> Sub-Sub-Category</th>
<th>Created on<br />Updated on</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{data.map((category,idx) => <tr>
{/* <td rowSpan={12}>Women</td> */}
<td>{category.name}</td>
{<td rowSpan={category.subCategoryData[0]?.subSubCategoryData?.length}>{
category.subCategoryData[0]?.name
}</td>}
{/* <td>{category.subSubCategoryData?.[0]?.name}</td> */}
<td>{'updated at'}</td>
<td>{category.slug}</td>
<td>
<label className="switch">
<input type="checkBox" />
<span className="slider round" />
</label>
</td>
<td className=" edit-view-icon flex">
<div className="edit-icon">
<SVG name="#icon-edit" />
</div>
<div className="view-icon">
<SVG name="#icon-eye" />
</div>
</td>
</tr>)}
</tbody>
</table>
解决方法
由于您的数据数组由三个级别组成,因此您可以像这样将数组分成 3 个级别。
data.map(level1 =>{
<td>{level1.name}</td>
<td>{level1.slug}</td>
......
(level1.subCategoryData.length > 0)?
level1.subCategoryData.map(level2 =>{
<td>{level2 .name}</td>
<td>{level2.slug}</td>
......
(level2.subCategoryData.length > 0)?
level2.subCategoryData.map(level3 =>{
<td>{level3 .name}</td>
<td>{level3 .slug}</td>
......
})
: null
})
: null
)}