使用给定值搜索和删除的最佳方法，用于从 object 内的数组中删除并返回 object javascript 的新数组？

Question

I have tried a couple of methods using findIndex, map, Object.entires someone help me find the best solution?

**

1. remove 2 from customerNumber array [1,2,3,4,5]
2. set to customerNumber value with array[1,3,4,5]
3. and spread customerNumber to filterState array

**

let filterState = [
    {'customerNumber': [1,2,3,4,5]},
    {'ward': [10, 20, 30, 40, 50]},
    {'enrolledDate': [111, 222,333, 444,555]},
    {'district': ['AAA', 'BBB','CCCC', 'DDD']},
    {'onBoardingSmsStatus': false}
]

search and delete 2 from customerNumber//customerNumber: 2

function removedChip(type='', value=0, filterState=[]) {

for(let i=0; i<filterState.length; i++) {


    let entries = Object.keys(filterState)
    .forEach(function eachKey(key) { 
        console.log(key); // alerts key 
        console.log(filterState[key]); // alerts value
    });
    console.log(entries)
    let searchIndex = entries.findIndex(type);

    console.log('searchIndex', searchIndex)
    console.log('type of ', filterState[searchIndex])
    for(let i=0; i<filterState[searchIndex]; i++) {
        //remove 2 from customerNumber array [1,2,3,4,5]
    // set to customerNumber value with array[1,3,4,5]
    // and spread customerNumber to  filterState array
    }
}

}

function invoking with values

removedChip('customerNumber', 10, filterState)

the expected output is

    let filterState = [
    {'customerNumber': [1,3,4,5]},
    {'ward': [10, 20, 30, 40, 50]},
    {'enrolledDate': [111, 222,333, 444,555]},
    {'district': ['AAA', 'BBB','CCCC', 'DDD']},
    {'onBoardingSmsStatus': false}
]

Answer 1

In your removedChip You can filter it like..

function removedChip(type = "", value = 0, filterState = []) {
  const result = filterState.map((data) => {
    if (data[type]) {
    // Modify only the given field in the type params
      return { [type]: data[type].filter((du) => du !== value) };
    }
    return data;
  });
  return result;
}
let filterState = [
  { customerNumber: [1, 2, 3, 4, 5] },
  { ward: [10, 20, 30, 40, 50] },
  { enrolledDate: [111, 222, 333, 444, 555] },
  { district: ["AAA", "BBB", "CCCC", "DDD"] },
  { onBoardingSmsStatus: false }
];

console.log(removedChip("customerNumber", 2, filterState));

Answer 2

This might help:

 function removedChip(type='', value=0, filterState=[]) {

   const filterStateTypeArray = filterState.filter(fs => 
                  Object.keys(fs)[0] === type);
   const filterStateTypeItem = filterStateTypeArray ? 
                   filterStateTypeArray[0] : null;
   
   if(!filterStateTypeItem){return;}

   let valueArray =  filterStateTypeItem[type];
       valueArray = valueArray.filter(vA => vA !== value);
    
   filterStateTypeItem[type] = valueArray;
 
   console.log(filterState);

}

let filterState = [
    {'customerNumber': [1,2,3,4,5]},
    {'ward': [10, 20, 30, 40, 50]},
    {'enrolledDate': [111, 222,333, 444,555]},
    {'district': ['AAA', 'BBB','CCCC', 'DDD']},
    {'onBoardingSmsStatus': false}
]


removedChip('customerNumber', 2, filterState);

Answer 3

Not much of a change from other answers which are all feasible - I'd just split out the functions in 2 to have the filtering handled for an array which can then be tested independently of the parent function or independently from whatever list of objects is inputted

Ie you can have a generic filtering method that can be tested in isolation from the input list of objects.

let filterState = [
  { customerNumber: [1, 2, 3, 4, 5] },
  { ward: [10, 20, 30, 40, 50] },
  { enrolledDate: [111, 222, 333, 444, 555] },
  { district: ['AAA', 'BBB', 'CCCC', 'DDD'] },
  { onBoardingSmsStatus: false },
];

// Independent testable filtering
const removeChipFromArray = (array, removeValue = 0) => {
  return array.filter(e => e !== removeValue);
};

// Function to handle the removal of any value from any list of objects
const removeChips = (listOfObjects, value) => {
  listOfObjects.forEach((element, index) => {
    const key = Object.keys(element);
    // General type checker (which would be easier in TS than JS but here is a half-safe way of ensuring you're operating against a list
    // You could also convert it to an Array if you think that's better
    if (typeof(element[key]) === 'object') {
        element[key] = removeChipFromArray(element[key], value);
    }
  });
};

removeChips(filterState, 2);

console.log(filterState);