Sort a tree with parent child relation alphabetically

Question

I am trying to make a coding environment it has a file system in which users could add or delete files, the file system is a tree structure and I am trying to sort the tree alphabetically when users update anything on that filesystem. I have tried looking on the inte.net but couldn't find much.

[
    {
        "name": "src",
        "id": "DfGfg_ckUK_YRM0Guwz-U",
        "type": "dir",
        "path": "/src",
        "children": [
            {
                "name": "App.css",
                "id": "VZ0DztZohJ5QNZA_MJEJj",
                "type": "file",
                "path": "/src/App.css",
            },
            {
                "name": "style.css",
                "id": "6djglLnepQ5VKpE02FfbJ",
                "type": "file",
                "path": "/src/style.css",
            },
            {
                "name": "components",
                "id": "LQtSXX8bXPRskbQGjBIsU",
                "type": "dir",
                "path": "/src/components",
                "children": [
                    {
                        "name": "Clicker.js",
                        "id": "B-qo2rzjElEq_LdbflIik",
                        "type": "file",
                        "path": "/src/components/Clicker.js",
                    }
                ]
            },
            {
                "name": "index.js",
                "id": "A3aR70uZ-OA1dwLNon7RA",
                "type": "file",
                "path": "/src/index.js",
            },
            {
                "name": "App.js",
                "id": "_43kjHrcpFAvlvn0orNe6",
                "type": "file",
                "path": "/src/App.js",
            }
        ]
    },
    {
        "name": "public",
        "id": "CaQSW19bFlIzdd5l0xKXX",
        "type": "dir",
        "path": "/public",
        "children": [
            {
                "name": "index.html",
                "id": "B1QcK9n8eRVVNF0N_jTeR",
                "type": "file",
                "path": "/public/index.html",
            }
        ]
    }
]

The sorted structure should come out like the below. The type='dir' comes first (alphabetically) and then its files which are also sorted. Any help would be appreciated.

[
    {
        "name": "public",
        "id": "CaQSW19bFlIzdd5l0xKXX",
        "type": "dir",
        "path": "/public",
        "children": [
            {
                "name": "index.html",
                "id": "B1QcK9n8eRVVNF0N_jTeR",
                "type": "file",
                "path": "/public/index.html",
            }
        ]
    },
    {
        "name": "src",
        "id": "DfGfg_ckUK_YRM0Guwz-U",
        "type": "dir",
        "path": "/src",
        "children": [
            {
                "name": "components",
                "id": "LQtSXX8bXPRskbQGjBIsU",
                "type": "dir",
                "path": "/src/components",
                "children": [
                    {
                        "name": "Clicker.js",
                        "id": "B-qo2rzjElEq_LdbflIik",
                        "type": "file",
                        "path": "/src/components/Clicker.js",
                    }
                ]
            },
            {
                "name": "App.css",
                "id": "VZ0DztZohJ5QNZA_MJEJj",
                "type": "file",
                "path": "/src/App.css",
            },
            {
                "name": "App.js",
                "id": "_43kjHrcpFAvlvn0orNe6",
                "type": "file",
                "path": "/src/App.js",
            },
            {
                "name": "index.js",
                "id": "A3aR70uZ-OA1dwLNon7RA",
                "type": "file",
                "path": "/src/index.js",
            },
            {
                "name": "style.css",
                "id": "6djglLnepQ5VKpE02FfbJ",
                "type": "file",
                "path": "/src/style.css",
            },
        ]
    },
]

Thanks.

Answer 1

You would need to:

• sort the top level nodes as indicated (by type, then by name)
• perform the same on the children of each node in that level

Here is how that looks:

 function sortHierarchy(nodes) { nodes.sort((a, b) => a.type.localeCompare(b.type) || a.name.localeCompare(b.name)); nodes.forEach(({children}) => sortHierarchy(children?? [])); } // Demo const hierarchy = [{"name": "src","id": "DfGfg_ckUK_YRM0Guwz-U","type": "dir","path": "/src","children": [{"name": "App.css","id": "VZ0DztZohJ5QNZA_MJEJj","type": "file","path": "/src/App.css",},{"name": "style.css","id": "6djglLnepQ5VKpE02FfbJ","type": "file","path": "/src/style.css",},{"name": "components","id": "LQtSXX8bXPRskbQGjBIsU","type": "dir","path": "/src/components","children": [{"name": "Clicker.js","id": "B-qo2rzjElEq_LdbflIik","type": "file","path": "/src/components/Clicker.js",}]},{"name": "index.js","id": "A3aR70uZ-OA1dwLNon7RA","type": "file","path": "/src/index.js",},{"name": "App.js","id": "_43kjHrcpFAvlvn0orNe6","type": "file","path": "/src/App.js",}]},{"name": "public","id": "CaQSW19bFlIzdd5l0xKXX","type": "dir","path": "/public","children": [{"name": "index.html","id": "B1QcK9n8eRVVNF0N_jTeR","type": "file","path": "/public/index.html",}]}]; sortHierarchy(hierarchy); console.log(hierarchy);