javascript - 如何在数组中执行更新功能？

Question

我有 updateFruit 功能。用户可以在其中更新他们的水果选择。我从 API 获得了水果的详细信息。只是为了展示我这样展示的概念fruit_temp。里面的所有值fruit_temp都是通过 API 获取的，这意味着水果已经存在。现在我想执行更新功能。

在此更新功能中，用户可以添加新水果或从选项中删除他们选择的水果。如果将新水果Mango添加到 中updateFruit_temp，它将像这样发送数据

 {
    "fruit_db_id": null,
    "fruit_id": 4,
    "status": true,
  }

如果用户想Papaya从水果选择中删除示例，它将发送这样的数据

 {
    "fruit_db_id": 71,
    "fruit_id": 1,
    "status": false,
  }

但是现在我在更新水果并将数据发送到上面的预期输出时遇到了问题。如何updateFruit_temp使用 API 中请求的格式推送新的更新值？我必须像这样将数据发送到 API。

//if new fruit is inserted
{
    "fruit_db_id": null,
    "fruit_id": 4,
    "status": true,
  },

//if fruit is removed
{
    "fruit_db_id": 71,
    "fruit_id": 1,
    "status": false,
  }

//if user wants to keep the fruit 

{
    "fruit_db_id": 71,
    "fruit_id": 1,
    "status": true,
  }

以下是我尝试过的，但updateFruit_temp没有回应newFruit如何解决这个问题的新值？

let fruit_temp = [];
let updateFruit_temp = [];
let status = true;

$(document).ready(function() {
  getFruitDetails();
  //updateFruit();


});
const getFruitDetails = () => {
  //getDetail through API and pass the selected value into the fruit temp
  fruit_temp = [{
    db_id: 71,
    id: 1,
    name: 'papaya'
  }, {
    db_id: 73,
    id: 3,
    name: 'apple'
  }];

  //console.log(fruit_temp);

}


const updateFruit = () => {

  let newFruit = $('#updateFruit').val();
  fruit_temp = fruit_temp.filter(function(el) {
    if (el != null) {
      updateFruit_temp.push({
        "fruit_db_id": (el.db_id == undefined) ? null : el.db_id,
        "fruit_id": (el.id == undefined) ? newFruit : el.id,
        "status": (el.db_id == undefined || el.db_id == null) ? false : true,
      }) - 1;
      return el;
    }
  });

  console.log(newFruit);

  console.log(updateFruit_temp);


}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<label> Add new fruit :</label>
<select class="selectpicker" multiple data-live-search="true" id="updateFruit">
  <option value="1" selected>Papaya</option>
  <option value="2">Honeydew</option>
  <option value="3" selected>Apple</option>
  <option value="4">Mango</option>
</select>

<button type="submit" onclick="updateFruit()"> Update Fruit Choice</button>

这不是错误，它只是没有执行更新功能。意思是我updateFruit_temp的不工作。

updateFruit_temp如果用户从选择中选择水果，这就是我要实现的目标honeydew, apple and removed papaya。

{
    "fruit_db_id": null,
    "fruit_id": 4,
    "status": true, // add honeydew
  },
{
    "fruit_db_id": 73,
    "fruit_id": 3,
    "status": true, //maintain apple 
  },

{
    "fruit_db_id": 71,
    "fruit_id": 1,
    "status": false,  //remove papaya
  }

标签： javascriptjqueryarrays