Created
January 9, 2023 11:52
-
-
Save robertowest/82742172d7e5551b9c6546fdb90ed11c to your computer and use it in GitHub Desktop.
Selector HTML cargado desde un JSON
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<p>Selecciona los productor en función de la categoría seleccionada.</p> | |
<p>Los controles son rellenados desde un archivo JSON.</p> | |
<label for="categoria">Catergoria</label><br> | |
<select id="categoria" onchange="cargarProductos()"><option>Seleccione una opción</option></select> | |
<br> | |
<label for="producto">Producto</label><br> | |
<select id="producto"><option>Seleccione una opción</option></select> | |
</body> | |
</html> | |
<script type="text/javascript"> | |
let array = [{ | |
categoria: 'Frutas', | |
producto: 'Manzana' | |
}, | |
{ | |
categoria: 'Frutas', | |
producto: 'Pera' | |
}, | |
{ | |
categoria: 'Verdura', | |
producto: 'Cilantro' | |
}, | |
{ | |
categoria: 'Verdura', | |
producto: 'Platano' | |
}, | |
]; | |
// esta función me ayuda a obtener las diferentes categorías y a retornar una copia del array | |
let obtenerDiferentes = function (data, descripcion) { | |
var array = []; | |
let ds = null; | |
for (let obj of data) { | |
if (ds != obj[descripcion]) { | |
array.push(obj) | |
//cuando encuentro un id diferente, seteo a id con ese valor. | |
ds = obj[descripcion] | |
} | |
} | |
return JSON.parse(JSON.stringify(array)); | |
} | |
// esta función limpia los options del select que coincida con el id enviado como parámetro. | |
let limpiarSelect = function (id) { | |
let select = document.getElementById(id); | |
select.selectedIndex = null; | |
for (let i = 0; i < select.options.length; i++) { | |
select.options.remove(i); | |
//resto 1 al indice porque al ir eliminando, el .length de los options cambia. | |
i--; | |
} | |
} | |
// cargo las categorías cuando la página completa la carga, esto es necesario para garantizar que los elementos html se carguen | |
let cargarCategoria = function () { | |
//quiero obtener los diferentes valores del array por el criterio de categoria. | |
let categorias = obtenerDiferentes(array, 'categoria'); | |
//accedo al elemento select | |
let select = document.getElementById('categoria'); | |
//recorro las categorías obtenidas anteriormente | |
for (let obj of categorias) { | |
//creo un nuevo elemento option | |
let option = document.createElement("option"); | |
//seteo value y text. Puede parecer innecesario ya que ambas key tienen el mismo valor pero se deja planteado en caso de que se maneje id y descripción | |
option.value = obj.categoria; | |
option.text = obj.categoria; | |
select.add(option) | |
} | |
} | |
// ejecuto esta función cuando seleccione un valor diferente de categoría. Esta función carga los productos a partir de una categoría seleccioanda | |
let cargarProductos = function () { | |
//obtengo la posición del valor seleccionado en el select de categoría | |
let indexCategoriaSelected = document.getElementById('categoria').selectedIndex; | |
//con el indice obtengo el text del options seleccionado | |
let valueCategoriaSelected = document.getElementById('categoria').options[indexCategoriaSelected].value; | |
//accedo al select de productos | |
let select = document.getElementById('producto'); | |
//es necesario siempre limpiar el select de productos cada vez que selecciono algo nuevo en categoría. | |
limpiarSelect('producto'); | |
//Ahora recorro el array original filtrando los productos por la categoría seleccionada anteriormente. | |
for (let obj of array) { | |
if (obj.categoria == valueCategoriaSelected) { | |
let option = document.createElement("option"); | |
option.value = obj.producto; | |
option.text = obj.producto; | |
select.add(option) | |
} | |
} | |
} | |
window.onload = function () { | |
cargarCategoria(); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment