Vue中如何提取子数组键值并对员工列表按指定规则排序？

我有一个能正常运行的Vue组件，它从API获取员工列表并展示。现在要加个功能：让管理员能控制员工的展示顺序，对应API响应里的"Display order"字段。需要先拿到这个字段的值，再重新排序员工列表——有"Display order"值的员工排在值为null的员工前面。

我是编程爱好者，现在完全没头绪，查了排序资料但没法整合到现有代码里，请问该怎么修改this.employees实现这个功能？

API响应示例 #

{
  id: 200779, 
  first_name: "Sample", 
  last_name: "Name", 
  include_as_teacher: "1",
  subjects: "Math, Science",
  status: "Active",
  custom_fields: [
    {
      field_id: 17363, 
      name: "Custom field 1", 
      value: "something"
    },
    {
      field_id: 17940, 
      name: "Custom field 2", 
      value: "something"
    },
    {
      field_id: 18262, 
      name: "Display order", 
      value: "1"
    }
  ]
}

现有Vue代码 #

mounted() {
  fetch("api url", requestOptions)
    .then(response => response.json())
    .then(response => console.log(response))
    .then(response => response.filter((e) => e.include_as_teacher = 1 && e.subjects != null && e.status == "Active"))
    .then(
      (response) =>
        (this.employees = this.cloneEmployees = response.map((e) => ({
          id: e.id,
          first_name: e.first_name,
          last_name: e.last_name,
          subjects: e.subjects.split(","),
          // order: e.custom_fields???.value
        }))))
    .then((response) => this.subjects = [...new Set(this.cloneEmployees.flatMap(item => item.subjects))].sort())
},

分两步修改：先提取Display order字段值，再对员工列表按规则排序。

1. 提取Display order字段 #

在map转换员工数据时，从custom_fields数组中匹配名称为"Display order"的项，将其值转为数字（方便排序）；如果找不到该字段，就设为Infinity（排序时会自动排到最后）。

2. 按规则排序员工列表 #

排序逻辑：有Display order值的员工排前面，且按数值从小到大排序；无值的员工排最后。

3. 整合修正后的完整代码 #

注意：现有代码里filter中的e.include_as_teacher = 1是赋值操作，会导致过滤逻辑失效，要改成e.include_as_teacher === "1"（API返回的是字符串类型的"1"）；另外建议添加错误捕获处理。

修改后的mounted代码：

mounted() {
  fetch("api url", requestOptions)
    .then(response => response.json())
    .then(response => console.log(response))
    // 修正过滤条件的赋值错误
    .then(response => response.filter((e) => e.include_as_teacher === "1" && e.subjects != null && e.status === "Active"))
    .then(response => {
      // 转换数据并提取排序字段
      const transformedList = response.map((e) => {
        const orderField = e.custom_fields.find(field => field.name === "Display order");
        const order = orderField ? Number(orderField.value) : Infinity;
        return {
          id: e.id,
          first_name: e.first_name,
          last_name: e.last_name,
          subjects: e.subjects.split(","),
          order
        };
      });
      // 执行排序
      const sortedList = transformedList.sort((a, b) => {
        // 无排序值的排后面
        if (a.order === Infinity && b.order !== Infinity) return 1;
        if (a.order !== Infinity && b.order === Infinity) return -1;
        // 有排序值的按数值从小到大排
        return a.order - b.order;
      });
      // 赋值给组件变量
      this.employees = this.cloneEmployees = sortedList;
      return sortedList;
    })
    .then(() => {
      this.subjects = [...new Set(this.cloneEmployees.flatMap(item => item.subjects))].sort();
    })
    // 添加错误捕获
    .catch(err => console.error("员工数据获取失败：", err));
},

内容的提问来源于stack exchange，提问作者JJJ