I have 6 input fields I am capturing user inputs and placing into a new array to filter out a table. I am using keyup on the inputs and pushing the inputs into the query array. However, every new keyup pushes the current input string into the array, creating multiple copies of each key with its value. I need to sort all duplicate keys leaving the last indexed version of that key.
var operatorFilter = document.querySelector("#operatorFilters");
operatorFilter.innerHTML = `<input type="text" id="idFilter" onkeyup='idFilter(this, "id")' placeholder="Operator ID"></input>
<input type="text" id="operatorFilter" onkeyup='idFilter(this, "operatorName")' placeholder="Operator Name"></input>
<input type="text" id="facilityFilter" onkeyup='idFilter(this, "facility")' placeholder="Facility"></input>
<input type="text" id="pieceCountFilter" onkeyup='idFilter(this, "piece")' placeholder="Piece Count"></input>
<input type="text" id="jobCountFilter" onkeyup='idFilter(this, "job")' placeholder="Job Count"></input>
<input type="text" id="dateFilter" onkeyup='idFilter(this, "date")' placeholder="Date Filter"></input>`
var query = []
function idFilter(userInput, inputID){
var inputHolder = []
if(inputID == "id"){
inputHolder = ({operatorID:userInput.value})
}
else if(inputID == "operatorName"){
inputHolder = ({operatorFirst:userInput.value}, {operatorLast:userInput.value})
}
else if(inputID == "facility"){
inputHolder = ({facility:userInput.value})
}
else if(inputID == "piece"){
inputHolder = ({pieceCount:userInput.value})
}
else if(inputID == "job"){
inputHolder = ({jobCount:userInput.value})
}
else if(inputID == "date"){
inputHolder = ({date:userInput.value})
}
console.log(inputHolder)
query.push(inputHolder)
console.log(query)
}
//Example
//console logged output
0: {operatorID: '3'}
1: {operatorID: '36'}
2: {operatorID: '368'}
3: {operatorID: '3689'}
4: {operatorLast: 'B'}
5: {operatorLast: 'B'}
6: {operatorLast: 'Bo'}
7: {operatorLast: 'Bob'}
8: {operatorLast: 'Bob '}
9: {operatorLast: 'Bob S'}
10: {operatorLast: 'Bob S'}
11: {operatorLast: 'Bob Smi'}
12: {operatorLast: 'Bob Smi'}
13: {operatorLast: 'Bob Smit'}
14: {operatorLast: 'Bob Smith'}
15: {date: '08'}
16: {date: '08/'}
17: {date: '08/2'}
18: {date: '08/25'}
19: {date: '08/25/'}
20: {date: '08/25/2'}
21: {date: '08/25/20'}
22: {date: '08/25/202'}
23: {date: '08/25/2024'}
I need to remove the duplicates of keys leaving the last input for each input field
I found what I thought would be a solution and set it up within another test trigger
function testFilter(){
query = query.filter((value, index, self) =>
index === self.findIndex((t) => (
t.place === value.place && t.name === value.name
))
)
console.log(query)
}
//Expected Result
0: {operatorID: '3689'}
1: {operatorLast: 'Bob Smith'}
2: {date: '08/25/2024'}
//Actual result
0: {operatorID: '3'}
2
Answers
Why do you need copies of input?
The best way is without copies or array, just an object with keys
Like:
Note: i change "inputID" to be more direct
If you like to keep different names, you could take an object and get the wanted objects.