Nodejs Hierarchical Menu

Question

I’m trying to build a dynamic menu based on this table here:

1   CONFIGURACOES   0       
2   ADMINISTRATIVO  0       
3   USUARIOS        2       
4   INSERIR_USUARIO 3       
5   ALTERAR_USUARIO 3       
6   EXCLUIR_USUARIO 3       
7   MENUS_DE_ACESSO 2       
8   DEPARTAMENTOS_DO_USUARIO    2

The menu should present the submenu of the corresponding menu hierarchically, but I’m lost here, I tried some things but did not set up the way I wanted, someone can help me?

I am using the following query to search:

app.get('/listaMenus', function(req, res) {

    var conexao = app.servidor.mySQLConnect();


    listaMenus = function() {
        return new Promise(function(resolve, reject) {

            conexao.query("select * from MENU",
                function(err, rows) {
                    if (rows === undefined) {
                        reject(new Error('Linhas não forão populadas!'));
                    } else {
                        resolve(rows);
                    }
                }
            )
        })
    }

and in the role was trying to make an adaptation of a code I found in PHP.

function construirMenu(menus, menuFinal, menuSuperiorId, nivel = 0) {
            // Passando por todos os menus
            menus.forEach(dados => {
                // Se for um menu filho do menu superior que estamos procurando
                if (dados['ID_MENU_SUP'] == menuSuperiorId) {
                    // Armazenando no menu final
                    menuFinal.push(dados);
                }
                console.log(dados);
            });

            // Incrementando nível
            nivel++;
            // Passando pelos menus desse nível
            for (var i = 0; i < menuFinal.length; i++) {

                // Inicializando indices
                menuFinal[i].push('sub_menus') = [];
                menuFinal[i].push('nivel') = nivel;
                console.log(menuFinal);

                // Chamando a função novamente para construção dos submenus
                construirMenu(dados, menuFinal[i]['sub_menus'], '2', nivel);
            }

        }
        menuFinal = new Array();
        construirMenu(results, menuFinal, null);
        console.log(menuFinal);

I am trying to bring more or less so the result of the API:

[
  {
    "id": "1",
    "menu_id_superior": null,
    "descricao": "Menu 1",
    "sub_menus": [
      {
        "id": "3",
        "menu_id_superior": "1",
        "descricao": "Menu 1.1",
        "sub_menus": [
          {
            "id": "4",
            "menu_id_superior": "3",
            "descricao": "Menu 1.1.1",
            "sub_menus": [
              {
                "id": "5",
                "menu_id_superior": "4",
                "descricao": "Menu 1.1.1.1",
                "sub_menus": [],
                "nivel": 4
              }
            ],
            "nivel": 3
          }
        ],
        "nivel": 2
      },
      {
        "id": "6",
        "menu_id_superior": "1",
        "descricao": "Menu 1.2",
        "sub_menus": [],
        "nivel": 2
      }
    ],
    "nivel": 1
  },
  {
    "id": "2",
    "menu_id_superior": null,
    "descricao": "Menu 2",
    "sub_menus": [
      {
        "id": "7",
        "menu_id_superior": "2",
        "descricao": "Menu 2.1",
        "sub_menus": [],
        "nivel": 2
      },
      {
        "id": "8",
        "menu_id_superior": "2",
        "descricao": "Menu 2.2",
        "sub_menus": [],
        "nivel": 2
      }
    ],
    "nivel": 1
  }
]

but with my menu

Contents of the Rows:

[ RowDataPacket {
    ID_MENU: 1,
    DESCRICAO: 'CONFIGURACOES',
    ID_MENU_SUP: 0,
    DT_CADASTRO: null,
    DT_ALTERACAO: null },
  RowDataPacket {
    ID_MENU: 2,
    DESCRICAO: 'ADMINISTRATIVO',
    ID_MENU_SUP: 0,
    DT_CADASTRO: null,
    DT_ALTERACAO: null },
  RowDataPacket {
    ID_MENU: 3,
    DESCRICAO: 'USUARIOS',
    ID_MENU_SUP: 2,
    DT_CADASTRO: null,
    DT_ALTERACAO: null },
  RowDataPacket {
    ID_MENU: 4,
    DESCRICAO: 'INSERIR_USUARIO',
    ID_MENU_SUP: 3,
    DT_CADASTRO: null,
    DT_ALTERACAO: null },
  RowDataPacket {
    ID_MENU: 5,
    DESCRICAO: 'ALTERAR_USUARIO',
    ID_MENU_SUP: 3,
    DT_CADASTRO: null,
    DT_ALTERACAO: null },
  RowDataPacket {
    ID_MENU: 6,
    DESCRICAO: 'EXCLUIR_USUARIO',
    ID_MENU_SUP: 3,
    DT_CADASTRO: null,
    DT_ALTERACAO: null },
  RowDataPacket {
    ID_MENU: 7,
    DESCRICAO: 'MENUS_DE_ACESSO',
    ID_MENU_SUP: 2,
    DT_CADASTRO: null,
    DT_ALTERACAO: null },
  RowDataPacket {
    ID_MENU: 8,
    DESCRICAO: 'DEPARTAMENTOS_DO_USUARIO',
    ID_MENU_SUP: 2,
    DT_CADASTRO: null,
    DT_ALTERACAO: null } ]