如何实现数组更新功能，生成符合API要求的水果选择修改提交数据

原有代码核心问题 #

• 仅遍历了已保存的水果列表fruit_temp，没有处理用户新增的、不在原有保存列表中的水果
• 每次调用更新函数没有清空updateFruit_temp，多次点击按钮会重复插入旧数据
• status判断逻辑错误，status的取值应该为「当前水果是否被用户勾选」，和db_id是否存在无关
• 多选select的val()返回的是选中值的数组，原有逻辑错误把整个数组当做单个水果id使用

修复后完整代码 #

let fruit_temp = [];
let updateFruit_temp = [];

$(document).ready(function() {
  getFruitDetails();
});

const getFruitDetails = () => {
  // 模拟API返回的已保存水果
  fruit_temp = [{
    db_id: 71,
    id: 1,
    name: 'papaya'
  }, {
    db_id: 73,
    id: 3,
    name: 'apple'
  }];
}

const updateFruit = () => {
  // 每次更新前清空数组，避免旧数据残留
  updateFruit_temp = [];
  // 获取用户当前选中的所有水果id，转成数字类型
  const selectedFruitIds = $('#updateFruit').val().map(id => Number(id));
  // 先处理原有已保存的水果
  fruit_temp.forEach(fruit => {
    updateFruit_temp.push({
      fruit_db_id: fruit.db_id,
      fruit_id: fruit.id,
      status: selectedFruitIds.includes(fruit.id)
    })
  })
  // 再处理用户新增的、不在原有保存列表里的水果
  const existedFruitIds = fruit_temp.map(f => f.id);
  selectedFruitIds.forEach(selectedId => {
    if (!existedFruitIds.includes(selectedId)) {
      updateFruit_temp.push({
        fruit_db_id: null,
        fruit_id: selectedId,
        status: true
      })
    }
  })
  // 打印结果
  console.log('提交数据：', updateFruit_temp);
}

逻辑说明 #

1. 先获取用户当前选中的所有水果id，统一转为数字类型避免和字符串比对出错
2. 遍历原有已保存的水果，生成对应条目，status为该水果是否被用户勾选
3. 遍历用户选中的水果，找出没有在原有保存列表里的水果，作为新增条目生成，fruit_db_id为null，status为true

测试效果 #

当用户勾选Honeydew（value=2）、Apple（value=3），取消勾选Papaya（value=1）时，输出的updateFruit_temp如下：

[
  {
    "fruit_db_id": 71,
    "fruit_id": 1,
    "status": false
  },
  {
    "fruit_db_id": 73,
    "fruit_id": 3,
    "status": true
  },
  {
    "fruit_db_id": null,
    "fruit_id": 2,
    "status": true
  }
]

符合API要求的提交格式。

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