Question

我正在使用两个数据来最终生成HTML表格。

数据：这是来自数据库调用的核心数据。

UserColumns：这定义了表列的顺序。此对象中的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]);
  }

}

在上面的示例代码中，keys中的data需要重新排序以匹配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();

基于定义的值

1 个答案: