БЛОГ НА HUSL


Как мне сделать динамичные таблицы по страницам

Автор вопроса: KristalkillPlay

1.Странички не должны повторятся,например: если в pf есть категория Economy, и в bonus категория economy то оно создаст лишь 1 кнопку Economy,и в той таблице покажет все что имеет категорию Economy.

2.Странички это кнопки.

3.От количества категорий будет зависеть количество страниц.

4.В табличке должни быть,только 6 параметров:name,aliases,description,usage,public,nsfw

var pages = {
  'block' => Command {
    nsfw: false,
    name: 'block',
    aliases: [ 'block' ],
    category: 'development',
    public: false,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'eval' => Command {
    nsfw: false,
    name: 'eval',
    aliases: [ 'e' ],
    category: 'development',
    public: false,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'shell' => Command {
    nsfw: false,
    name: 'shell',
    aliases: [ 'shel' ],
    category: 'development',
    public: false,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'stopbot' => Command {
    nsfw: false,
    name: 'stopbot',
    aliases: [ 'sbot' ],
    category: 'development',
    public: false,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'add' => Command {
    nsfw: false,
    name: 'add',
    aliases: [ 'add' ],
    category: 'economy',
    public: undefined,
    Permission: [ 'ADMINISTRATOR' ],
    PermissionBOT: undefined
  },
  'bonus' => Command {
    nsfw: false,
    name: 'bonus',
    aliases: [ 'bonus' ],
    category: 'economy',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'lb' => Command {
    nsfw: false,
    name: 'lb',
    aliases: [ 'leaders' ],
    category: 'economy',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'pay' => Command {
    nsfw: false,
    name: 'pay',
    aliases: [ 'pay' ],
    category: 'economy',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'pf' => Command {
    nsfw: false,
    name: 'pf',
    aliases: [ 'profile' ],
    category: 'economy',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'rep' => Command {
    nsfw: false,
    name: 'rep',
    aliases: [ 'reputation' ],
    category: 'economy',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'rps' => Command {
    nsfw: false,
    name: 'rps',
    aliases: [ 'rps' ],
    category: 'economy',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'set' => Command {
    nsfw: false,
    name: 'set',
    aliases: [ 'set' ],
    category: 'economy',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'shop' => Command {
    nsfw: false,
    name: 'shop',
    aliases: [ 'shop' ],
    category: 'economy',
    public: undefined,
    Permission: undefined,
    PermissionBOT: [ 'MANAGE_ROLES' ]
  },
  'avatar' => Command {
    nsfw: false,
    name: 'avatar',
    aliases: [ 'avatar' ],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'cat' => Command {
    nsfw: false,
    name: 'cat',
    aliases: [ 'cat' ],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'fox' => Command {
    nsfw: false,
    name: 'fox',
    aliases: [ 'fox' ],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'giveaway' => Command {
    nsfw: false,
    name: 'giveaway',
    aliases: [ 'giveaway' ],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'kiss' => Command {
    nsfw: false,
    name: 'kiss',
    aliases: [ 'kiss' ],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'pat' => Command {
    nsfw: false,
    name: 'pat',
    aliases: [ 'pat' ],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'poll' => Command {
    nsfw: false,
    name: 'poll',
    aliases: [ 'poll' ],
    category: 'fun',
    public: undefined,
    Permission: [ 'ADMINISTRATOR' ],
    PermissionBOT: undefined
  },
  'reverse' => Command {
    nsfw: false,
    name: 'reverse',
    aliases: [ 'reverse' ],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'roll' => Command {
    nsfw: false,
    name: 'roll',
    aliases: [ 'roll' ],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'slap' => Command {
    nsfw: false,
    name: 'slap',
    aliases: [ 'slap' ],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'ss' => Command {
    nsfw: true,
    name: 'ss',
    aliases: [ 'ss' ],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'weather' => Command {
    nsfw: false,
    name: 'weather',
    aliases: [],
    category: 'fun',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'botinfo' => Command {
    nsfw: false,
    name: 'botinfo',
    aliases: [ 'botinfo' ],
    category: 'info',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'help' => Command {
    nsfw: false,
    name: 'help',
    aliases: [ 'help' ],
    category: 'info',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'shards' => Command {
    nsfw: false,
    name: 'shards',
    aliases: [ 'shards' ],
    category: 'info',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'ban' => Command {
    nsfw: false,
    name: 'ban',
    aliases: [ 'ban' ],
    category: 'moder',
    public: undefined,
    Permission: [ 'BAN_MEMBERS' ],
    PermissionBOT: [ 'BAN_MEMBERS' ]
  },
  'clear' => Command {
    nsfw: false,
    name: 'clear',
    aliases: [ 'clear' ],
    category: 'moder',
    public: undefined,
    Permission: [ 'MANAGE_MESSAGES' ],
    PermissionBOT: [ 'MANAGE_MESSAGES' ]
  },
  'kick' => Command {
    nsfw: false,
    name: 'kick',
    aliases: [ 'kick' ],
    category: 'moder',
    public: undefined,
    Permission: [ 'KICK_MEMBERS' ],
    PermissionBOT: [ 'KICK_MEMBERS' ]
  },
  'mute' => Command {
    nsfw: false,
    name: 'mute',
    aliases: [ 'mute' ],
    category: 'moder',
    public: undefined,
    Permission: [ 'MANAGE_CHANNELS' ],
    PermissionBOT: [ 'MANAGE_CHANNELS', 'MANAGE_ROLES' ]
  },
  'slowmode' => Command {
    nsfw: false,
    name: 'slowmode',
    aliases: [ 'slowmode' ],
    category: 'moder',
    public: undefined,
    Permission: [ 'MANAGE_CHANNELS' ],
    PermissionBOT: [ 'MANAGE_CHANNELS' ]
  },
  'unmute' => Command {
    nsfw: false,
    name: 'unmute',
    aliases: [ 'unmute' ],
    category: 'moder',
    public: undefined,
    Permission: [ 'MANAGE_CHANNELS' ],
    PermissionBOT: [ 'MANAGE_CHANNELS', 'MANAGE_ROLES' ]
  },
  'unwarn' => Command {
    nsfw: false,
    name: 'unwarn',
    aliases: [ 'unwarn' ],
    category: 'moder',
    public: undefined,
    Permission: [ 'KICK_MEMBERS' ],
    PermissionBOT: undefined
  },
  'warn' => Command {
    nsfw: false,
    name: 'warn',
    aliases: [ 'warn' ],
    category: 'moder',
    public: undefined,
    Permission: [ 'KICK_MEMBERS' ],
    PermissionBOT: undefined
  },
  'leave' => Command {
    nsfw: false,
    name: 'leave',
    aliases: [],
    category: 'music',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'pause' => Command {
    nsfw: false,
    name: 'pause',
    aliases: [],
    category: 'music',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'play' => Command {
    nsfw: false,
    name: 'play',
    aliases: [],
    category: 'music',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'queue' => Command {
    nsfw: false,
    name: 'queue',
    aliases: [],
    category: 'music',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'resume' => Command {
    nsfw: false,
    name: 'resume',
    aliases: [],
    category: 'music',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'skip' => Command {
    nsfw: false,
    name: 'skip',
    aliases: [],
    category: 'music',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'volume' => Command {
    nsfw: false,
    name: 'volume',
    aliases: [],
    category: 'music',
    public: undefined,
    Permission: undefined,
    PermissionBOT: undefined
  },
  'prefix' => Command {
    nsfw: false,
    name: 'prefix',
    aliases: [ 'prefix' ],
    category: 'setting',
    public: undefined,
    Permission: [ 'ADMINISTRATOR' ],
    PermissionBOT: undefined
  },
  'setbox' => Command {
    nsfw: false,
    name: 'setbox',
    aliases: [],
    category: 'setting',
    public: undefined,
    Permission: [ 'ADMINISTRATOR' ],
    PermissionBOT: undefined
  }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Тег table</title>
    <style>
        table {
            width: 100%;
            background: white;
            color: white;
            border-spacing: 1px;
        }
        td,
        th {
            background: maroon;
            padding: 5px;
        }
    </style>
</head>
<body>
<table>
    <tr id="tr">
    </tr>
</table>
<table id="table">
</table>
</body>

Это коллекция,вот либа: https://github.com/discordjs/collection

Вот что пока-что получилось(Переделанный под мои нужды код @Denis640Kb, но не рабочий)

   let response = await fetch('/api/commands');
        let commands = await response.json();
        let tr = document.getElementById('tr');
        if (tr) {
          let pages = {};
          for (let command of commands) {
            let category = command.category;
            if (!pages.hasOwnProperty(category)) {
              pages[category] = {};
            }
            pages[category][command.name] = command;
          }
          console.log(pages);
          for (let [key, value] of Object.entries(pages)) {
            let newth = document.createElement('th'); // Создаём th
            let newtd = document.createElement('td'); // Создаём td
            let input = document.createElement('input'); // Создаём кнопку
            input.type = 'button'; // Задаём тип кнопки
            input.className = 'buttons'; // Задаём класс, если нужно
            input.value = key; // В поле input вставляем значение из категории
            newtd.appendChild(input); // Добавляем input в td
            newth.appendChild(newtd); // Добавляем td в th
            tr.appendChild(newth); // Добавляем th в tr, который у нас уже существует.
            input.addEventListener('click', function (e) {
              // Начинаем слушать каждый input на нажатие
              e.preventDefault(); // убираем стандартный функционал кнопки
              let table = document.getElementById('table'); // Получаем вторую таблицу, в которую будем вносить данные
              table.innerHTML = ''; // Очищаем её.
              let newtr1 = document.createElement('tr'); // Создаём tr
              console.log(value);
              for (let [key1, value1] of Object.entries(value)) {
                console.log(value1);
                for (let [key2, value2] of Object.entries(value1)) {
                  let newtd1 = document.createElement('td'); // создаём td
                  newtd1.innerText = value2; // добавляем в него текст значения
                  newtr1.appendChild(newtd1); // Добавляем td в tr
                }
                table.appendChild(newtr1); // Добавляем tr в нашу таблицу.
              }
            });
          }
        }

Если точнее,то он разделят всё,но пихает в 1 ряд таблицы


Источник

Ответы (2 шт):

Автор решения: Denis640Kb

Добавил комментарии для понимания.
Можно добавить ещё смещение по offset left на 0, чтобы таблицу было видно, или скролл добавить на меню, но это уже, я полагаю самостоятельно добавите.

   var pages = {
        development:{'pages':{
        'block' : {'Command' : {'name' : 'val1', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница1'}},
            'eval' : {'Command' : {'name' : 'val2', 'description' : 'desc2', 'public' : '2', 'nsfw' : 'nsfw2', 'category' : 'Страница2'}},
            'shell' : {'Command' : {'name' : 'val3', 'description' : 'desc3', 'public' : '3', 'nsfw' : 'nsfw3', 'category' : 'Страница3'}},
            'stopbot': {'Command' : {'name' : 'val4', 'description' : 'desc4', 'public' : '4', 'nsfw' : 'nsfw4', 'category' : 'Страница4'}},
            'add': {'Command' : {'name' : 'val5', 'description' : 'desc5', 'public' : '5', 'nsfw' : 'nsfw5', 'category' : 'Страница5'}},
            'bonus': {'Command' : {'name' : 'val6', 'description' : 'desc6', 'public' : '6', 'nsfw' : 'nsfw6', 'category' : 'Страница6'}},
            'lb': {'Command' : {'name' : 'val7', 'description' : 'desc7', 'public' : '7', 'nsfw' : 'nsfw7', 'category' : 'Страница7'}},
            'pay': {'Command' : {'name' : 'val8', 'description' : 'desc8', 'public' : '8', 'nsfw' : 'nsfw8', 'category' : 'Страница8'}},
            'pf': {'Command' : {'name' : 'val9', 'description' : 'desc9', 'public' : '9', 'nsfw' : 'nsfw9', 'category' : 'Страница9'}},
            'rep': {'Command' : {'name' : 'val10', 'description' : 'desc10', 'public' : '10', 'nsfw' : 'nsfw10', 'category' : 'Страница10'}},
            'rps': {'Command' : {'name' : 'val11', 'description' : 'desc11', 'public' : '11', 'nsfw' : 'nsfw11', 'category' : 'Страница11'}},
            'set': {'Command' : {'name' : 'val12', 'description' : 'desc12', 'public' : '12', 'nsfw' : 'nsfw12', 'category' : 'Страница12'}},
            'shop': {'Command' : {'name' : 'val13', 'description' : 'desc13', 'public' : '13', 'nsfw' : 'nsfw13', 'category' : 'Страница13'}},
            'avatar': {'Command' : {'name' : 'val14', 'description' : 'desc14', 'public' : '14', 'nsfw' : 'nsfw14', 'category' : 'Страница14'}},
            'cat': {'Command' : {'name' : 'val15', 'description' : 'desc15', 'public' : '15', 'nsfw' : 'nsfw15', 'category' : 'Страница15'}},
            'fox': {'Command' : {'name' : 'val16', 'description' : 'desc16', 'public' : '16', 'nsfw' : 'nsfw16', 'category' : 'Страница16'}},
            'giveaway': {'Command' : {'name' : 'val17', 'description' : 'desc17', 'public' : '17', 'nsfw' : 'nsfw17', 'category' : 'Страница17'}},
            'kiss': {'Command' : {'name' : 'val18', 'description' : 'desc18', 'public' : '17', 'nsfw' : 'nsfw18', 'category' : 'Страница18'}},
            'pat': {'Command' : {'name' : 'val19', 'description' : 'desc19', 'public' : '18', 'nsfw' : 'nsfw19', 'category' : 'Страница19'}},
            'poll': {'Command' : {'name' : 'val20', 'description' : 'desc20', 'public' : '20', 'nsfw' : 'nsfw20', 'category' : 'Страница20'}},
            'reverse': {'Command' : {'name' : 'val21', 'description' : 'desc21', 'public' : '21', 'nsfw' : 'nsfw21', 'category' : 'Страница21'}},
            'roll': {'Command' : {'name' : 'val22', 'description' : 'desc22', 'public' : '22', 'nsfw' : 'nsfw22', 'category' : 'Страница22'}},
            'slap': {'Command' : {'name' : 'val23', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница23'}},
            'ss': {'Command' : {'name' : 'val24', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница24'}},
            'weather': {'Command' : {'name' : 'val25', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница25'}},
            'botinfo': {'Command' : {'name' : 'val26', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница26'}},
            'help': {'Command' : {'name' : 'val27', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница27'}},
            'shards': {'Command' : {'name' : 'val28', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница28'}},
            'ban': {'Command' : {'name' : 'val29', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница29'}},
            'clear': {'Command' : {'name' : 'val30', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница30'}},
            'kick': {'Command' : {'name' : 'val31', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница31'}},
            'mute': {'Command' : {'name' : 'val32', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница32'}},
            'slowmode': {'Command' : {'name' : 'val33', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница33'}},
            'unmute': {'Command' : {'name' : 'val34', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница34'}},
            'unwarn': {'Command' : {'name' : 'val35', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница35'}},
            'warn': {'Command' : {'name' : 'val36', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница36'}},
            'leave': {'Command' : {'name' : 'val37', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница37'}},
            'pause': {'Command' : {'name' : 'val38', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница38'}},
            'play': {'Command' : {'name' : 'val39', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница39'}},
            'queue': {'Command' : {'name' : 'val40', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница40'}},
            'resume': {'Command' : {'name' : 'val41', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница41'}},
            'skip': {'Command' : {'name' : 'val42', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница42'}},
            'volume': {'Command' : {'name' : 'val43', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница43'}},
            'prefix': {'Command' : {'name' : 'val44', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница44'}},
            'setbox': {'Command' : {'name' : 'val45', 'description' : 'desc1', 'public' : '1', 'nsfw' : 'nsfw1', 'category' : 'Страница45'}}
    }}};

    let tr = document.getElementById('tr');
    if(tr){
        for(let k in pages.development.pages){ // Перебираем все значения страниц
            //console.log(k, pages.development.pages[k]);
            let newth = document.createElement('th'); // Создаём th
            let newtd = document.createElement('td'); // Создаём td
            let input = document.createElement('input'); // Создаём кнопку
            input.type = 'button'; // Задаём тип кнопки
            input.className = 'buttons'; // Задаём класс, если нужно
            input.value = pages.development.pages[k].Command.category; // В поле input вставляем значение из категории
            newtd.appendChild(input); // Добавляем input в td
            newth.appendChild(newtd); // Добавляем td в th
            tr.appendChild(newth); // Добавляем th в tr, который у нас уже существует.
            input.addEventListener('click', function (e) { // Начинаем слушать каждый input на нажатие
                e.preventDefault(); // убираем стандартный функционал кнопки
                let table = document.getElementById('table'); // Получаем вторую таблицу, в которую будем вносить данные
                table.innerHTML = ""; // Очищаем её.
                let newtr1 = document.createElement('tr'); // Создаём tr
                for(let k1 in pages.development.pages[k].Command){ // Для каждого элемента в Command
                    let newtd1 = document.createElement('td'); // создаём td
                    newtd1.innerText = pages.development.pages[k].Command[k1]; // добавляем в него текст значения
                    newtr1.appendChild(newtd1); // Добавляем td в tr
                }
                table.appendChild(newtr1); // Добавляем tr в нашу таблицу.
            })
        }
    }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Тег table</title>
    <style>
        table {
            width: 100%;
            background: white;
            color: white;
            border-spacing: 1px;
        }
        td,
        th {
            background: maroon;
            padding: 5px;
        }
    </style>
</head>
<body>
<table>
    <tr id="tr">
    </tr>
</table>
<table id="table">
</table>
</body>

→ Ссылка
Автор решения: Denis640Kb

Информации много, по-этому новый ответ.
Вам необходимо сначала привести к единому структуру данных.
Постарался всю логику расписать в комментариях.

Если в данных есть такие разделы как name,aliases,description,usage,public,nsfw, то они будут выводиться. 

    var pages = {
        'block' : {'Command' : {
        nsfw: false,
            name: 'block',
            aliases: [ 'block' ],
            category: 'development',
            public: false,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'eval' : { 'Command' : {
        nsfw: false,
            name: 'eval',
            aliases: [ 'e' ],
            category: 'development',
            public: false,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'shell' : { 'Command' : {
        nsfw: false,
            name: 'shell',
            aliases: [ 'shel' ],
            category: 'development',
            public: false,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'stopbot' : { 'Command' : {
        nsfw: false,
            name: 'stopbot',
            aliases: [ 'sbot' ],
            category: 'development',
            public: false,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'add' : { 'Command' : {
        nsfw: false,
            name: 'add',
            aliases: [ 'add' ],
            category: 'economy',
            public: undefined,
            Permission: [ 'ADMINISTRATOR' ],
            PermissionBOT: undefined
    }},
    'bonus' : { 'Command' : {
        nsfw: false,
            name: 'bonus',
            aliases: [ 'bonus' ],
            category: 'economy',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'lb' : { 'Command' : {
        nsfw: false,
            name: 'lb',
            aliases: [ 'leaders' ],
            category: 'economy',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'pay' : { 'Command' : {
        nsfw: false,
            name: 'pay',
            aliases: [ 'pay' ],
            category: 'economy',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'pf' : { 'Command' : {
        nsfw: false,
            name: 'pf',
            aliases: [ 'profile' ],
            category: 'economy',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'rep' : { 'Command' : {
        nsfw: false,
            name: 'rep',
            aliases: [ 'reputation' ],
            category: 'economy',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'rps' : { 'Command' : {
        nsfw: false,
            name: 'rps',
            aliases: [ 'rps' ],
            category: 'economy',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'set' : { 'Command' : {
        nsfw: false,
            name: 'set',
            aliases: [ 'set' ],
            category: 'economy',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'shop' : { 'Command' : {
        nsfw: false,
            name: 'shop',
            aliases: [ 'shop' ],
            category: 'economy',
            public: undefined,
            Permission: undefined,
            PermissionBOT: [ 'MANAGE_ROLES' ]
    }},
    'avatar' : { 'Command' : {
        nsfw: false,
            name: 'avatar',
            aliases: [ 'avatar' ],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'cat' : { 'Command' : {
        nsfw: false,
            name: 'cat',
            aliases: [ 'cat' ],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'fox' : { 'Command' : {
        nsfw: false,
            name: 'fox',
            aliases: [ 'fox' ],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'giveaway' : { 'Command' : {
        nsfw: false,
            name: 'giveaway',
            aliases: [ 'giveaway' ],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'kiss' : { 'Command' : {
        nsfw: false,
            name: 'kiss',
            aliases: [ 'kiss' ],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'pat' : { 'Command' : {
        nsfw: false,
            name: 'pat',
            aliases: [ 'pat' ],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'poll' : { 'Command' : {
        nsfw: false,
            name: 'poll',
            aliases: [ 'poll' ],
            category: 'fun',
            public: undefined,
            Permission: [ 'ADMINISTRATOR' ],
            PermissionBOT: undefined
    }},
    'reverse' : { 'Command' : {
        nsfw: false,
            name: 'reverse',
            aliases: [ 'reverse' ],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'roll' : { 'Command' : {
        nsfw: false,
            name: 'roll',
            aliases: [ 'roll' ],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'slap' : { 'Command' : {
        nsfw: false,
            name: 'slap',
            aliases: [ 'slap' ],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'ss' : { 'Command' : {
        nsfw: true,
            name: 'ss',
            aliases: [ 'ss' ],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'weather' : { 'Command' : {
        nsfw: false,
            name: 'weather',
            aliases: [],
            category: 'fun',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'botinfo' : { 'Command' : {
        nsfw: false,
            name: 'botinfo',
            aliases: [ 'botinfo' ],
            category: 'info',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'help' : { 'Command' : {
        nsfw: false,
            name: 'help',
            aliases: [ 'help' ],
            category: 'info',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'shards' : { 'Command' : {
        nsfw: false,
            name: 'shards',
            aliases: [ 'shards' ],
            category: 'info',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'ban' : { 'Command' : {
        nsfw: false,
            name: 'ban',
            aliases: [ 'ban' ],
            category: 'moder',
            public: undefined,
            Permission: [ 'BAN_MEMBERS' ],
            PermissionBOT: [ 'BAN_MEMBERS' ]
    }},
    'clear' : { 'Command' : {
        nsfw: false,
            name: 'clear',
            aliases: [ 'clear' ],
            category: 'moder',
            public: undefined,
            Permission: [ 'MANAGE_MESSAGES' ],
            PermissionBOT: [ 'MANAGE_MESSAGES' ]
    }},
    'kick' : { 'Command' : {
        nsfw: false,
            name: 'kick',
            aliases: [ 'kick' ],
            category: 'moder',
            public: undefined,
            Permission: [ 'KICK_MEMBERS' ],
            PermissionBOT: [ 'KICK_MEMBERS' ]
    }},
    'mute' : { 'Command' : {
        nsfw: false,
            name: 'mute',
            aliases: [ 'mute' ],
            category: 'moder',
            public: undefined,
            Permission: [ 'MANAGE_CHANNELS' ],
            PermissionBOT: [ 'MANAGE_CHANNELS', 'MANAGE_ROLES' ]
    }},
    'slowmode' : { 'Command' : {
        nsfw: false,
            name: 'slowmode',
            aliases: [ 'slowmode' ],
            category: 'moder',
            public: undefined,
            Permission: [ 'MANAGE_CHANNELS' ],
            PermissionBOT: [ 'MANAGE_CHANNELS' ]
    }},
    'unmute' : { 'Command' : {
        nsfw: false,
            name: 'unmute',
            aliases: [ 'unmute' ],
            category: 'moder',
            public: undefined,
            Permission: [ 'MANAGE_CHANNELS' ],
            PermissionBOT: [ 'MANAGE_CHANNELS', 'MANAGE_ROLES' ]
    }},
    'unwarn' : { 'Command' : {
        nsfw: false,
            name: 'unwarn',
            aliases: [ 'unwarn' ],
            category: 'moder',
            public: undefined,
            Permission: [ 'KICK_MEMBERS' ],
            PermissionBOT: undefined
    }},
    'warn' : { 'Command' : {
        nsfw: false,
            name: 'warn',
            aliases: [ 'warn' ],
            category: 'moder',
            public: undefined,
            Permission: [ 'KICK_MEMBERS' ],
            PermissionBOT: undefined
    }},
    'leave' : { 'Command' : {
        nsfw: false,
            name: 'leave',
            aliases: [],
            category: 'music',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'pause' : { 'Command' : {
        nsfw: false,
            name: 'pause',
            aliases: [],
            category: 'music',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'play' : { 'Command' : {
        nsfw: false,
            name: 'play',
            aliases: [],
            category: 'music',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'queue' : { 'Command' : {
        nsfw: false,
            name: 'queue',
            aliases: [],
            category: 'music',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'resume' : { 'Command' : {
        nsfw: false,
            name: 'resume',
            aliases: [],
            category: 'music',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'skip' : { 'Command' : {
        nsfw: false,
            name: 'skip',
            aliases: [],
            category: 'music',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'volume' : { 'Command' : {
        nsfw: false,
            name: 'volume',
            aliases: [],
            category: 'music',
            public: undefined,
            Permission: undefined,
            PermissionBOT: undefined
    }},
    'prefix' : { 'Command' : {
        nsfw: false,
            name: 'prefix',
            aliases: [ 'prefix' ],
            category: 'setting',
            public: undefined,
            Permission: [ 'ADMINISTRATOR' ],
            PermissionBOT: undefined
    }},
    'setbox' : { 'Command' : {
        nsfw: false,
            name: 'setbox',
            aliases: [],
            category: 'setting',
            public: undefined,
            Permission: [ 'ADMINISTRATOR' ],
            PermissionBOT: undefined
    }}
    };

    let neededhead = ['name', 'aliases', 'description', 'usage', 'public', 'nsfw']; // Массив заголовков, который нам нужен.

    let tr = document.getElementById('tr');
    if(tr){
        let pages1 = [];
        for(let k1 in pages){ // Отсортируем массив по категориям для удобства.
            if(pages1[pages[k1].Command.category]){
                pages1[pages[k1].Command.category].push(pages[k1]);
            } else {
                pages1[pages[k1].Command.category] = [];
                pages1[pages[k1].Command.category].push(pages[k1]);
            }
        }
        
        for(let k in pages1){ // Перебираем все значения страниц
            let newth = document.createElement('th'); // Создаём th
            let newtd = document.createElement('td'); // Создаём td
            let input = document.createElement('input'); // Создаём кнопку
            input.type = 'button'; // Задаём тип кнопки
            input.className = 'buttons'; // Задаём класс, если нужно
            input.value = k; // В поле input вставляем значение из категории
            newtd.appendChild(input); // Добавляем input в td
            newth.appendChild(newtd); // Добавляем td в th
            tr.appendChild(newth); // Добавляем th в tr, который у нас уже существует.

            input.addEventListener('click', function (e) { // Начинаем слушать каждый input на нажатие
                e.preventDefault(); // убираем стандартный функционал кнопки
                let table = document.getElementById('table'); // Получаем вторую таблицу, в которую будем вносить данные
                table.innerHTML = ""; // Очищаем её.
                let checkhead = document.getElementById('headtr'); // Проверяем есть ли уже такой элемент на странице или нет
                if(!checkhead) { // Если нет, то создаём.
                    let headtr = document.createElement('tr'); // Создаём tr для заголовков
                    headtr.id = 'headtr'; // Проставляем id для поиска
                    if (pages1[k][0].Command) { // Выводим заголовки
                        for (let k4 in pages1[k][0].Command) {
                            if (neededhead.indexOf(k4) != -1) { // Проверяем находится ли элемент в списке needle
                                let headtd = document.createElement('td'); // создаём td
                                headtd.innerText = k4;
                                headtr.appendChild(headtd); // Добавляем td в tr
                            }
                        }
                    }
                    table.appendChild(headtr);
                }
                for(let k2 in pages1[k]){ // Для каждого элемента
                    let headtr = document.createElement('tr'); // Создаём tr
                    let newtr1 = document.createElement('tr'); // Создаём tr
                    for (let k3 in pages1[k][k2].Command){
                        if (neededhead.indexOf(k3) != -1) { // Проверяем находится ли элемент в списке needle
                            let newtd1 = document.createElement('td'); // создаём td
                            newtd1.innerText = pages1[k][k2].Command[k3]; // добавляем в него текст значения
                            newtr1.appendChild(newtd1); // Добавляем td в tr
                        }
                    }
                    table.appendChild(newtr1); // Добавляем tr в нашу таблицу.
                }
            })
        }
    }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Тег table</title>
    <style>
        table {
            width: 100%;
            background: white;
            color: white;
            border-spacing: 1px;
        }
        td,
        th {
            background: maroon;
            padding: 5px;
        }
    </style>
</head>
<body>
<table>
    <tr id="tr">
    </tr>
</table>
<table id="table">
</table>
</body>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.