基于存储在字符串数组js中的键的自定义排序/排序对象数组

Question

我有一个Object Array（申请人）和一个String Array（column_order）。

我将在表格中显示申请人，并且需要根据与列顺序中的字符串匹配的键的顺序来更改列的顺序。顺序将与 column_order 中字符串的顺序相同，不匹配的键在各自对象的末尾保持正常顺序。

这对我来说很难解释。所以我会给出一些示例结果来帮助解释。

applicants = [
{applicant_id: 5, recruiter_id: null, resume_cv_id: "null", cover_letter_id: "null", nda_id: null},
{applicant_id: 6, recruiter_id: null, resume_cv_id: "null", cover_letter_id: "null", nda_id: null}]

---

下面的第一个示例： 注意我希望recruiter_id 成为数组中每个对象的第一个密钥对。

然后剩下没有提到的都是在结尾的对象。

column_order = ["recruiter_id"]

result = [
{ recruiter_id: null, applicant_id: 5, resume_cv_id: "null", cover_letter_id: "null", nda_id: null},
{ recruiter_id: null, applicant_id: 6, resume_cv_id: "null", cover_letter_id: "null", nda_id: null}]

---

下面的第二个例子： 注意我希望recruiter_id 成为数组中每个对象的第一个密钥对，然后是cover_letter_id。

然后剩下没有提到的都是在结尾的对象。

column_order = ["recruiter_id","cover_letter_id"]

result = [
{recruiter_id: null,cover_letter_id: "null", applicant_id: 5,  resume_cv_id: "null",  nda_id: null},
{recruiter_id: null,cover_letter_id: "null", applicant_id: 6,  resume_cv_id: "null",  nda_id: null}]

---

我在想也许过滤掉匹配的键，然后将它们存储在一个临时对象数组中。然后在检查匹配完成后将其组合回来......？

以下是我目前所拥有的。尽管至少可以说它没有功能。我正在玩它，看看我返回了什么结果。

props.data = props.data.filter(function (obj) {
    var temp_obj = {}
    var obj_length = Object.size(obj)
    for (let index = 0; index < obj_length; index++) {

      if (Object.keys(obj)[index] == "asdasda") {
        console.log("This: ", Object.keys(obj)[index])
      }
      else {
        console.log("len",)
        var pair = { AAaa: "Test" };
        temp_obj[Object.size(temp_obj)] = { ...temp_obj[Object.size(temp_obj)], ...pair };

      }
    }

    return temp_obj
  })

我将尝试使用此Removing specific keys from an object 删除匹配的密钥，然后在开始时重新加入它们。

我发现这非常令人困惑且难以解决。有人可以帮我给我处理这个问题的代码。

Answer 1

根据您的描述，下面的方法提取不在column_order 中的列名，并将它们连接到column_order 数组。这提供了一个按正确顺序排列的列名数组。

然后，任务将循环遍历实际的applicants 数据和sortedColumns，以便在newOrder 中重构applicants。

// Given:
const applicants = [{applicant_id: 5, recruiter_id: null, resume_cv_id: "null", cover_letter_id: "null", nda_id: null},
{applicant_id: 6, recruiter_id: null, resume_cv_id: "null", cover_letter_id: "null", nda_id: null}];

const column_order = ['applicant_id', 'resume_cv_id'];

// Sort Columns
const sortedColumns = column_order.concat(
  Object.keys(applicants[0])
  .filter(k => k !== column_order[0] && k !== column_order[1])
);

// Create new applicants in correct column order
const newOrder = applicants.map(a => {
  let row = {};
  sortedColumns.forEach(c => row[c] = a[c]);
  return row;
});

console.log(newOrder);

Answer 2

我可能会以不同的方式考虑这个问题，但在我看来，您最终希望表格标题/列的顺序成为目标。如果是这种情况，那么我们不一定需要对数据本身进行变异。

这个答案可能反映了数据绑定解决方案，例如 Vuejs 或动态创建表格（即在数据循环中创建表格元素）。

设置初始数据-要重新排列的数据数组和键数组。

根据数组中的第一个对象设置标题名称，假设它们都相同：const headers = Object.keys(applicants[0]);

使用反转键数组的函数设置重新排列的标题，以便顺序反映键数组的顺序，然后为键数组中的每个项目对数组进行排序。

const applicants =[{applicant_id: 5, recruiter_id: null, resume_cv_id: "null", cover_letter_id: "null", nda_id: null},
{applicant_id: 5, recruiter_id: null, resume_cv_id: "null", cover_letter_id: "null", nda_id: null}];
const column_order = ["recruiter_id","cover_letter_id"];
const defaultHeaders = Object.keys(applicants[0]);
const mappedHeaders = mapHeaders(defaultHeaders, column_order);

function mapHeaders(arrayToMap, keysToFront) {
    let mapped = [...arrayToMap]; // Clone the array
  
  keysToFront.reverse()
    .forEach((x, i) => {
        mapped.sort((a,b) => (b === x) ? 1 : -1 );
  });
  
  return mapped;
};

console.log('defaultHeaders', defaultHeaders);
console.log('mappedHeaders', mappedHeaders);