antd.js

import React from "react";
import { Tree } from "antd";
import "./styles.css";
const temp = [
  {
    _id: "asdasd1022",
    departments: [
      {
        _id: "12507125",
        name: "Đào tạo",
        user: [
          { _id: "df23515", name: "User name 1" },
          { _id: "df2322515", name: "User name 2" },
          { _id: "df2333515", name: "User name 3" }
        ]
      }
    ],
    name: "parent 1"
  },
  {
    _id: "asdasd102225",
    departments: [
      {
        _id: "125178925",
        name: "Design",
        user: [
          { _id: "df23515", name: "User name 1" },
          { _id: "df2322515", name: "User name 2" },
          { _id: "df2333515", name: "User name 3" }
        ]
      }
    ],
    name: "parent 2"
  },
  {
    _id: "asdasd172225",
    departments: [
      {
        _id: "assdd122s227155",
        name: "Hành chính nhân sự",
        departments: [
          {
            _id: "asd24355155",
            name: "Tuyển dụng",
            departments: [
              {
                _id: "125fds14525",
                name: "Đào tạo",
                user: [
                  { _id: "ds221515", name: "User name 1" },
                  { _id: "df23df182515", name: "User name 2" },
                  { _id: "df5s253515", name: "User name 3" }
                ]
              }
            ],
            user: [
              { _id: "ds253515", name: "User name 1" },
              { _id: "df2331d82515", name: "User name 2" },
              { _id: "df5s233515", name: "User name 3" }
            ]
          }
        ],
        user: [
          { _id: "ds2521515", name: "User name 1" },
          { _id: "df2311582515", name: "User name 2" },
          { _id: "df5s362515", name: "User name 3" }
        ]
      }
    ],
    name: "parent 3"
  },
  { _id: "172225", name: "parent 4" }
];
const { TreeNode } = Tree;
export default function App() {
  const onSelect = (selectedKeys, info) => {
    console.log("selected", selectedKeys, info);
  };

  const onCheck = (checkedKeys, info) => {
    console.log("onCheck", checkedKeys, info);
  };

  const getTreeNode = rows => {
    let things = [];
    rows.forEach(row => {
      if (row.departments && row.departments.length) {
        things.push(
          <TreeNode title={row.name}>{getTreeNode(row.departments)}</TreeNode>
        );
      } else {
        things.push(<TreeNode title={row.name} />);
      }
    });

    return things;
  };
  return (
    <Tree checkable onSelect={onSelect} onCheck={onCheck}>
      {getTreeNode(temp)}
    </Tree>
  );
}

App.js

import React from "react";

export default function App() {
  const nested = [
    {
      name: "EWAY",
      deparments : [
        {
          name : "IHR"
        },
        {
          name : "ADFLEX",
          deparments : [
            {
              name : "Fedora"
            }
          ]
        },
        {
          name : "DYNO"
        },
        {
          name : "MO",
          deparments : [
            {
              name : "G1"
            },
            {
              name : "G2"
            },
             {
              name : "G8"
            }
          ]
        }
      ]
    },
    {
      name: "SSKPI"
    },
    {
      name: "GDC"
    },
    {
      name: "ABC"
    }
  ];
  
  const getLi = (row) => {
    return <li>{row.name}</li>;
  };
  
  const getOl = (rows) => {
    let things = [];
    
    rows.forEach((row) => {
      if(row.deparments){
        things.push(getLi(row))
        things.push(getOl(row.deparments))
      }else{
        things.push(getLi(row))
      } 
    });
    
    return <ol>{things}</ol>;
  };


  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      {getOl(nested)}
    </div>
  );
}

tree.js

const nested = [
  {
    name: "EWAY",
    deparments : [
      {
        name : "IHR"
      },
      {
        name : "ADFLEX",
        deparments : [
          {
            name : "Fedora"
          }
        ]
      },
      {
        name : "DYNO"
      },
      {
        name : "MO",
        deparments : [
          {
            name : "G1"
          },
          {
            name : "G2"
          },
           {
            name : "G8"
          }
        ]
      }
    ]
  },
  {
    name: "SSKPI"
  },
  {
    name: "GDC"
  },
  {
    name: "ABC"
  }
];

const getLi = (row) => {
  return `<li>${row.name}</li>`;
};

const getOl = (rows) => {
  let things = [];
  
  rows.forEach((row) => {
    if(row.deparments){
      things.push(getLi(row))
      things.push(getOl(row.deparments))
    }else{
      things.push(getLi(row))
    } 
  });
  
  return `<ol>${things.join('')}</ol>`;
};



document.write(getOl(nested))