基於定義值的Javascript訂單對象屬性

Question

我有兩個數據要用來最終生成一個HTML表。

數據：這是來自數據庫調用的核心數據。

UserColumns：定義表列將采用的fieldSource 。此對象中的fieldSource將與data對象中的鍵名對齊。

// Define the core data we will be working with. Assumed this comes from a database,
var data = [{
    FirstName: 'Joe',
    LastName: 'Jones',
    Age: 21,
    Location: 'Arizona',
    Color: 'Red', // Not defined in the column structure, therefore is not included in output
    Order: 1
  },
  {
    FirstName: 'Tim',
    LastName: 'Bob',
    Age: 25,
    Location: 'California',
    Color: 'Blue',
    Order: 3
  },
  {
    FirstName: 'Sally',
    LastName: 'Smith',
    Age: 29,
    Location: 'Florida',
    Color: 'Green',
    Order: 2
  }
];

// Defines the columns the user wants to include in their table output as well as their order
var userColumns = [{
    FieldID: 1,
    FieldSource: 'FirstName',
    FieldName: 'First Name',
    Order: 2
  },
  {
    FieldID: 2,
    FieldSource: 'LastName',
    FieldName: 'Last Name',
    Order: 1
  },
  {
    FieldID: 3,
    FieldSource: 'Age',
    FieldName: 'Age',
    Order: 4
  },
  {
    FieldID: 4,
    FieldSource: 'Location',
    FieldName: 'Location',
    Order: 3
  }
];

/*
    Loop over the data and order the content in the desired column order.
*/
function generateTableRows() {

  let output = [];

  for (var j = 0; j < data.length; j++) {
    // Need to re-order the object keys based on the "User Columns".
    // This also needs to ensure the the table rows are in the correct order based on the "Order" property
    console.log(data[j]);
  }

}

在上面的示例代碼中， data的keys需要重新排序以匹配userColumns對象中定義的順序。

最終目標是使用戶可以在所需視圖中查看數據表（按定義順序的列）。

我如何才能按特定順序放置密鑰，它們會以這種方式保留在對象中還是可以更改？

實際上，我需要獲取一個數據對象，然后將其輸出重新排列，以便在呈現表時按用戶定義的順序進行排列。

這是我正在嘗試執行的全部任務的小提琴： https : //jsfiddle.net/os48s1ne/

Answer 1

對userColumns屬性進行排序，然后遍歷它，並使用FieldSource屬性訪問數據中的相應屬性。

 /* Loop over the data and order the content in the desired column order. */ function generateTableRows() { userColumns.sort((a, b) => a.Order - b.Order); let output = data.map(d => userColumns.map(({ FieldSource, FieldName }) => `${FieldName} = ${d[FieldSource]}`).join(', ')); console.log(output); } // Define the core data we will be working with. Assumed this comes from a database, var data = [{ FirstName: 'Joe', LastName: 'Jones', Age: 21, Location: 'Arizona', Color: 'Red', // Not defined in the column structure, therefore is not included in output Order: 1 }, { FirstName: 'Tim', LastName: 'Bob', Age: 25, Location: 'California', Color: 'Blue', Order: 3 }, { FirstName: 'Sally', LastName: 'Smith', Age: 29, Location: 'Florida', Color: 'Green', Order: 2 } ]; // Defines the columns the user wants to include in their table output as well as their order var userColumns = [{ FieldID: 1, FieldSource: 'FirstName', FieldName: 'First Name', Order: 2 }, { FieldID: 2, FieldSource: 'LastName', FieldName: 'Last Name', Order: 1 }, { FieldID: 3, FieldSource: 'Age', FieldName: 'Age', Order: 4 }, { FieldID: 4, FieldSource: 'Location', FieldName: 'Location', Order: 3 } ]; generateTableRows();