Как изменить порядок столбцов с помощью Knex?

Question

Я извлекаю все свои данные из таблицы Sqlite3, используя Knex, electronic и JavaScript, и я хочу переупорядочить столбцы либо в запросе Knex, либо в части HTML / JavaScript.

Моя база данных sqlite3 имеетследующие данные заголовка:

id|Role|Password|Reference

При использовании следующего кода таблица отображается в следующем порядке:

Password|Reference|Role|id

Я попытался использовать метод .orderBy в Knex и такжепопытался изменить порядок в JavaScript, но я не могу изменить порядок столбцов.

Электронная сторона вещей, у меня есть:

ipcMain.on('getUserTable:all', (event) => {
  let getUserTable = 
knex('User').select(['id','Role','Reference','Password']).orderBy('Role');
  getUserTable.then(function(tableData){
    newWin.webContents.send("userResultSent", tableData);
  });
});

В части HTML у меня есть:

ipc.on('userResultSent', (event, tableData) => {
    var html = '<table>';
    html += '<tr>';
    for( var j in tableData[0] ) {
        html += '<th>' + j + '</th>';
        }
    html += '</tr>';
    for( var i = 0; i < tableData.length; i++) {
        html += '<tr>';
            for( var j in tableData[i] ) {
            html += '<td>' + tableData[i][j] + '</td>';
        }
    }
    html += '</table>';
    document.getElementById('db_output_container').innerHTML = html;
});

Я хочу иметь возможность запросить базу данных, чтобы массив отображался в точном порядке, как в таблице.

Answer 1

Проблема с вашим текущим подходом состоит в том, что объект - это неупорядоченные пакеты свойств.Поэтому не имеет значения, как упорядочить столбцы - порядок свойств не гарантируется.

Если вам нужен конкретный порядок, вы можете использовать Array.

Поскольку у вас есть общий код для отображения табличных данныхВы можете сделать следующее

ipcMain.on('getUserTable:all', (event) => {
  const columns = ['id','role','reference','password']

  let getUserTable = 
knex('User').select(columns).orderBy('role');
  getUserTable.then(function(tableData){
    newWin.webContents.send("userResultSent", {columns, tableData});
  });
});

При создании HTML

ipc.on('userResultSent', (event, {columns, tableData}) => {
    var html = '<table>';
    html += '<tr>';

    columns.forEach(column => {
        // if you want to capitalize names just do it here
        html += '<th>' + column + '</th>';
    })

    html += '</tr>';
    for( var i = 0; i < tableData.length; i++) {
        html += '<tr>';
        columns.forEach(column => {
          html += '<td>' + tableData[i][column] + '</td>';
        })

        html += '</tr>'; 
    }
    html += '</table>';
    document.getElementById('db_output_container').innerHTML = html;
  })

Answer 2

В конце второго цикла for вы должны закрыть тег tr. Действительно, вы открываете его сразу после второго цикла for, но не закрываете его. Я еще не проверял, но это должно работать.

Ваш HTML-файл должен выглядеть следующим образом.

ipc.on('userResultSent', (event, tableData) => {
    var html = '<table>';
    html += '<tr>';
    for( var j in tableData[0] ) {
        html += '<th>' + j + '</th>';
        }
    html += '</tr>';
    for( var i = 0; i < tableData.length; i++) {
        html += '<tr>';
            for( var j in tableData[i] ) {
            html += '<td>' + tableData[i][j] + '</td>';
        }
        html += '</tr>'; /* i added this line here */
    }
    html += '</table>';
    document.getElementById('db_output_container').innerHTML = html;
});