從 Javascript 對象中添加和刪除特定值

Question

我想從一個大的 JSON 數組中過濾我的數據，為了過濾，我們使用了不同的參數，如性別、公司等。這是將傳遞給過濾數據的過濾器數組。

filteredArray={gender:[],company:[],job_title:[],location:[],department:[]};

這是當我選中或取消選中過濾器中的某些復選框時正在調用的函數。

  onSelectFilter(event, type,  value){
    console.log(event.checked, type, value);
    if(event.checked){
      if(this.filteredArray.gender == type){
        this.filteredArray.gender.push(value);
      }
      //if condition same for location. company etc
    }else if(event.checked){
      if(this.filteredArray.gender == type){
        var index = this.filteredArray.gender.indexOf(value);
        if (index !== -1) this.filteredArray.gender.splice(index, 1);
      }
      //if condition same for location. company etc
    }
  }

這里： event.checked將是 true/false ， type是性別，公司等， value是“男性”或“abc”等。當我取消選中取決於type ，特定value將被刪除。

檢查或取消檢查后，這將是所需的輸出：

filteredArray={gender:["male"],company:["x","y"],job_title:[],location:["abc","88u","lki"],department:[]};

那個函數 onSelectFilter() 不好，有什么好的方法可以做到。 謝謝你的幫助。

這是在選擇性別復選框為“男”后輸出的json，其他參數如公司、部門等未在復選框中選中

[
    {
        "id": 1,
        "first_name": "Hardy",
        "last_name": "Shakelade",
        "email": "hshakelade0@reuters.com",
        "gender": "Male",
        "avatar": "http://dummyimage.com/194x108.jpg/dddddd/000000",
        "location": "Çepan",
        "company": "Jabberstorm",
        "job_title": "VP Product Management",
        "department": "Marketing"
    },
    {
        "id": 2,
        "first_name": "Joshua",
        "last_name": "Ketton",
        "email": "jketton1@google.it",
        "gender": "Male",
        "avatar": "http://dummyimage.com/181x224.jpg/ff4444/ffffff",
        "location": "Chemin Grenier",
        "company": "Trupe",
        "job_title": "Staff Scientist",
        "department": "Research and Development"
    }........]

Answer 1

我在第一次閱讀您的實現時發現了幾個問題。

1. 你if條件似乎是不正確的，您要檢查this.filteredArray.gender == type ，但type為字符串， filteredArray.gender是一個數組，所以那些永遠不會相等。 我想你想在這里檢查的是if (type === "gender")

2. else if部分中的條件與原始if條件相同。 如果他們兩人正在檢查event.checked就是truthy。 我假設您打算在else if條件中檢查event.checked === false ？

根據我從問題中的理解，我想出了以下實現，僅對您的實現稍作修改：

const onSelectFilter = (event, type, value) => {
  if(event.checked){
    if (type === "gender"){
      this.filteredArray.gender.push(value);
    }

    if (type === "company") {
      this.filteredArray.company.push(value);
    }

    if (type === "job_title") {
      this.filteredArray.job_title.push(value);
    }

    //...
  } else if (event.checked === false) {
    if(type === "gender"){
      const index = this.filteredArray.gender.indexOf(value);
      if (index !== -1) {
        this.filteredArray.gender.splice(index, 1);
      }
    }

    // ...
  }
}

Answer 2

您可以使用filter和reduce方法：

const onSelectFilter = (arr, type, value) => {
  let filtered =  arr.filter(f=> f[type] == value);
  return filtered.reduce((a, c) => {
    a[type] = a[type] || { gender: [], company: [], job_title: [], 
        location: [], department: []};
    a[type].gender.push(c.gender);
    a[type].company.push(c.company);
    a[type].job_title.push(c.job_title);
    a[type].location.push(c.location);
    a[type].department.push(c.department);
    return a;
  }, {})
}

一個例子：

 const arr = [ { "id": 1, "first_name": "Hardy", "last_name": "Shakelade", "email": "hshakelade0@reuters.com", "gender": "Male", "avatar": "http://dummyimage.com/194x108.jpg/dddddd/000000", "location": "Çepan", "company": "Jabberstorm", "job_title": "VP Product Management", "department": "Marketing" }, { "id": 2, "first_name": "Joshua", "last_name": "Ketton", "email": "jketton1@google.it", "gender": "Male", "avatar": "http://dummyimage.com/181x224.jpg/ff4444/ffffff", "location": "Chemin Grenier", "company": "Trupe", "job_title": "Staff Scientist", "department": "Research and Development" } ] const onSelectFilter = (arr, type, value) => { let filtered = arr.filter(f=> f[type] == value); return filtered.reduce((a, c) => { a[type] = a[type] || { gender: [], company: [], job_title: [], location: [], department: []}; a[type].gender.push(c.gender); a[type].company.push(c.company); a[type].job_title.push(c.job_title); a[type].location.push(c.location); a[type].department.push(c.department); return a; }, {}) } console.log(onSelectFilter(arr, 'gender', 'Male'));