skip to Main Content

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


  1. Why do you need copies of input?
    The best way is without copies or array, just an object with keys
    Like:

    var operatorFilter = document.querySelector("#operatorFilters");
    operatorFilter.innerHTML = `<input type="text" id="idFilter" onkeyup='idFilter(this, "operatorID")' placeholder="Operator ID"></input>
                                    <input type="text" id="operatorFilter" onkeyup='idFilter(this, "operatorFirst")' placeholder="Operator Name"></input>
                                    <input type="text" id="facilityFilter" onkeyup='idFilter(this, "facility")' placeholder="Facility"></input>
                                    <input type="text" id="pieceCountFilter" onkeyup='idFilter(this, "pieceCount")' placeholder="Piece Count"></input>
                                    <input type="text" id="jobCountFilter" onkeyup='idFilter(this, "jobCount")' placeholder="Job Count"></input>
                                    <input type="text" id="dateFilter" onkeyup='idFilter(this, "date")' placeholder="Date Filter"></input>`
    

    Note: i change "inputID" to be more direct

    const query = {}
    
    function idFilter(userInput, inputID) {
        const  value = userInput.value
        query[inputID] = value
        console.log(query)
    }
    
    Login or Signup to reply.
  2. If you like to keep different names, you could take an object and get the wanted objects.

    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>`
        
    const query = {};
    
    function idFilter(userInput, inputID) {
        const
            data = {
                id: { operatorID: userInput.value },
                operatorName: [{ operatorFirst: userInput.value }, { operatorLast: userInput.value }],
                facility: { facility: userInput.value },
                piece: { pieceCount: userInput.value },
                job: { jobCount: userInput.value },
                date: { date: userInput.value }
            };
        if (userInput.value === '') delete query[inputID];
        else query[inputID] = data[inputID];
        
        console.log(Object.values(query).flat());
    }
    <div id="operatorFilters"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search