Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

136
Views
how filter in an object and persisting his previous values that were filtered before

I´m getting the id selects with a function getSelectedId, then I´m creating an object with his values selectElementFromSelect when it listen to a click and returning the coincidences between this object and a mock data with filtrarAutos.

It is working but then I have to make another filter adding in the object the other values from the select.

I was trying with a recursive function but it kepps failling and making the filter from scratch

thanks for your help

const resultado = document.querySelector('#resultado')
const select = document.querySelectorAll('select')
const maxYear = new Date().getFullYear()
const minYear = maxYear - 10
const datos = ['marca', 'year', 'minimo', 'maximo', 'puertas', 'transmision', 'color']
let datosBusqueda = {}

document.addEventListener('click', (e) => {
    getSelectedId(e)
})

document.addEventListener('DOMContentLoaded', () => {
    mostrarAutos()
    llenarSelect()
})

const getSelectedId = (e) => {
   const getId = datos.find(elem => elem === e.target.id)
   const selectTarget = {
        id: getId,
        element: document.querySelector(`#${getId}`)
   }

   const propiedadesSeleccionadas = selectElementFromSelect(selectTarget)
   filtrarAutos(selectTarget, propiedadesSeleccionadas)
}

const selectElementFromSelect = (selectTarget) => {
    const {id, element} = selectTarget


    element.addEventListener('change', (e) => {
        datosBusqueda[id] = e.target.value
    })

    return datosBusqueda
}

const mostrarAutos = () => {
    autos.forEach(auto => {
        const {marca, modelo, year, puertas, transmision, precio, color} = auto
        const autoHtml = document.createElement('p')
        autoHtml.textContent = `
        ${marca} ${modelo} - ${year} - ${puertas} 
        Puertas - Transimision: ${transmision} - Precio: ${precio} - color: ${color}
        `
        resultado.appendChild(autoHtml)
    })
}

const llenarSelect = () => {
    for (let i = maxYear; i >= minYear; i--) {
        const option = document.createElement('option')
        option.value = i
        option.textContent = i
        year.appendChild(option)
    }
}



const filtrarAutos = (selectTarget, propiedadesSeleccionadas) => {
    const { id } = selectTarget
  
    const autosFiltrados = autos.filter(auto => {
        if (propiedadesSeleccionadas[id]) {
            return auto[id] === propiedadesSeleccionadas[id]
        }
        return auto
    })

    if (autosFiltrados[id]) {
        
        filtrarAutos(selectTarget, autosFiltrados)
    }
    console.log(autosFiltrados)
}



about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!