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)
}