如何 map 表中的深度嵌套对象与具有动态数据的 react.js 中的行跨度适当的列？

Question

I want to map data in table so that i should have outcome as shown in table. Category data should span across rows if there are sub categories in that category. Similarly sub categories should span according as per categories and sub sub categories. Could any one write down function to map the same in React.js. I am providing JSON for refrence, it will be okay if you amend JSON accordingly. Here's the 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",
                "sort_order": 0,
                "subSubCategoryData": [
                    {
                        "category_id": 10,
                        "parent_id": 7,
                        "name": "Rompers",
                        "slug": "rompers",
                        "sort_order": 0
                    },
                    {
                        "category_id": 11,
                        "parent_id": 7,
                        "name": "Jumpsuite",
                        "slug": "jumpsuite",
                        "sort_order": 0
                    }
                ]
            },
            {
                "category_id": 8,
                "parent_id": 6,
                "name": "Dresses",
                "slug": "dresses",
                "sort_order": 0,
                "subSubCategoryData": [
                    {
                        "category_id": 9,
                        "parent_id": 8,
                        "name": "Dress",
                        "slug": "dress",
                        "sort_order": 0
                    }
                ]
            }
        ]
    },
    {
        "category_id": 7,
        "parent_id": 6,
        "name": "Jumpsuite and Rompers",
        "slug": "jumpsuite-and-rompers",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 10,
                "parent_id": 7,
                "name": "Rompers",
                "slug": "rompers",
                "sort_order": 0,
                "subSubCategoryData": []
            },
            {
                "category_id": 11,
                "parent_id": 7,
                "name": "Jumpsuite",
                "slug": "jumpsuite",
                "sort_order": 0,
                "subSubCategoryData": []
            }
        ]
    },
    {
        "category_id": 8,
        "parent_id": 6,
        "name": "Dresses",
        "slug": "dresses",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 9,
                "parent_id": 8,
                "name": "Dress",
                "slug": "dress",
                "sort_order": 0,
                "subSubCategoryData": []
            }
        ]
    },
    {
        "category_id": 9,
        "parent_id": 8,
        "name": "Dress",
        "slug": "dress",
        "sort_order": 0,
        "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>

Answer 1

Since your data Array is consist on three levels then you can triverse your array by 3 levels like this.

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
)}