Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

137
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda