0

¡Hola!

Estoy intentando hacer un SELECT dinámico con un array asociativo con javascript. Para ello, he usado eval como en el siguiente ejemplo:

eval("Provincias" + comunidadAutonoma.value);

Para saber si efectivamente existe la variable llamada ProvinciasAndalucia por ejemplo o ProvinciasCastillaLaMancha o cosas así, según el nombre de la comunidad elegida.

Pero he leído que el uso de eval es peligroso... ¿entonces qué otra forma hay?

De lo contrario, la única manera que se me ocurre no es tan dinámica... Con múltiples if (probablemente anidados) o un switch múltiple, lo que crearía muchísimas más líneas de código...

¿Hay alguna otra forma de sustituir la función eval para hacer lo mismo de modo seguro?

___

ACTUALIZACIÓN

___

Tengo los siguientes select:

<select name="ComunidadAutonomaEnvio" id="ComunidadAutonomaEnvio">
                    <option value="Selecciona">- Selecciona -</option>
                    <option value="Andalucia">Andalucía</option>
                    <option value="Aragon">Aragón</option>
                    <option value="Cantabria">Cantabria</option>
                    <option value="CastillaLaMancha">Castilla-La Mancha</option>
                    <option value="CastillaYLeon">Castilla Y León</option>
                    <option value="Cataluna">Cataluña</option>
                    <option value="Ceuta">Ceuta</option>
                    <option value="ComunidadDeMadrid">Comunidad de Madrid</option>
                    <option value="ComunidadForalDeNavarra">Comunidad Foral de Navarra</option>
                    <option value="ComunidadValenciana">Comunidad Valenciana</option>
                    <option value="Extremadura">Extremadura</option>
                    <option value="Galicia">Galicia</option>
                    <option value="IslasBaleares">Islas Baleares</option>
                    <option value="IslasCanarias">Islas Canarias</option>
                    <option value="LaRioja">La Rioja</option>
                    <option value="Melilla">Melilla</option>
                    <option value="PaisVasco">País Vasco</option>
                    <option value="PrincipadoDeAsturias">Principado de Asturias</option>
                    <option value="RegionDeMurcia">Región de Murcia</option>
                </select>

<select name="ProvinciaEnvio" id="ProvinciaEnvio"></select>
<select name="LocalidadEnvio" id="LocalidadEnvio"></select>

Están vacíos porque tengo que cargarlos con javascript dinámicamente.

Los tengo enlazados con Javascript así:

var comunidadAutonoma = document.getElementById('ComunidadAutonomaEnvio');
var provincia = document.getElementById('ProvinciaEnvio');
var localidad = document.getElementById('LocalidadEnvio');

Tengo una variable que pretende ser un array asociativo así:

var ProvinciasAndalucia = {
        "Almeria" : "Almería",
        "Cadiz" : "Cádiz",
        "Cordoba" : "Córdoba",
        "Granada" : "Granada",
        "Huelva" : "Huelva",
        "Jaen" : "Jaén",
        "Malaga" : "Málaga",
        "Sevilla" : "Sevilla"
    };

Esto lo tengo para cada Comunidad autónoma. Entonces lo que quería era que automáticamente añadiese la palabra "Provincias" al value del option seleccionado, compruebe que existe una variable que se llame así (que en este caso así es) y la use para crear los option del select ProvinciaEnvio (o sea, usando la variable provincia). Es decir, de Andalucía, tendría que coger la variable ProvinciasAndalucía, de CastillaLaMancha, la variable ProvinciasCastillaLaMancha, etc...

Para evitar hacer un switch que evalúe cada una de las posibles comunidades autónomas y entonces decirle manualmente qué variable tiene que utilizar y qué tiene que hacer. Por eso, como en teoría no es seguro usar eval, quisiera saber qué otraforma de hacerlo hay.

¡Un saludo!

5
  • Realmente, ¿cuál es la comprobación que debes hacer? No queda muy claro, creo.
    – VRoxa
    el 20 may. 2020 a las 21:43
  • El select lo tengo en la variable ComunidadAutonoma. El .value hace referencia al valor del option seleccionado. Es decir, el nombre de la comunidad autónoma sin espacios ni tildes, como podría ser CastillaLaMancha o Andalucia. Tengo creada una variable llamada exactamente igual pero con la palabra "Provincias" justo al principio, pegado a Por ejemplo, ProvinciasAndalucia. Lo que necesito comprobar es si existe esa variable para elegirla y crear con ella el contenido del siguiente SELECT con los valores de las provincias que correspondan. el 20 may. 2020 a las 21:53
  • ¿Pero por qué no usar una variable con propósito general...? Siento que sigo sin entender tu escenario, jeje. Perdona. Podría escribir una respuesta de por qué eval no es una buena práctica a seguir, pero puedo reproducir tu caso.
    – VRoxa
    el 20 may. 2020 a las 22:00
  • Justo lo que quiero es evitar el uso de eval. Pretendo NO tener que decirle a javascript "¿El valor del option seleccionado es Andalucia? Entonces rellena el select provincia con la variable ProvinciasAndalucia" (y así con cada provincia)... En cambio quisiera lo siguiente: "Añade al principio del valor del option seleccionado la palabra Provincias y, si existe una variable que se llame así, úsala para rellenar el select llamado provincia". Pero como no es seguro eval, que básicamente en este caso me decía si existe, quería saber si hay algo que me sirva para hacer la comprobación. ¡Gracias! el 20 may. 2020 a las 22:11
  • ¿Tienes todos los valores posibles guardados en variables? Por favor edita tu pregunta y agrega esa información.
    – Triby
    el 21 may. 2020 a las 22:00

1 respuesta 1

1

Creo que más bien el problema es de diseño.
La metaprogramación es siempre algo a evitar y su uso debe ser justificado. Con eso no digo que no pueda usarse, hay implementaciones de metaprogramación muy útiles y escenarios donde simplifica el desarrollo muchísimo (por ejemplo, los Proxy de JavaScript), pero creo que este no es el caso.

Si bien tienes varias constantes ya definidas del tipo

var ProvinciasAndalucia = {
    "Almeria" : "Almería",
    "Cadiz" : "Cádiz",
    // ...
};

Nada te impide hacer un objeto donde almacenes toda esta información y aproveches los value de las option para indexarlo y poder sacar la información de forma segura.

const values = {
    Andalucia: {
        Almeria: 'Almería',
        Cadiz: 'Cádiz',
        // ...
    },
    CastillaLaMancha: {
        Guadalajara: 'Guadalajara',
        Toledo: 'Toledo',
        // ...
    },
    // ...
};

De este siempre podrás acceder a la información requerida de forma dinámica y segura.

comunidadAutonoma.addEventListener('change', event => {
    const { value } = event.target;
    const provinces = values[value];

    // Provinces es, en este punto, el análogo a tu anterior objeto ProvinciasX
    // ...
});

De todas formas, deberíamos recurrir a la metaprogramación implementando algo parecido a Object.keys(provinces) para acceder a cada uno de los campos y su valor asociado.
Para ello, te propongo la siguiente estructura

const values = {
    Andalucia: [
        { 
            label: 'Almería',
            value: 'Almeria'
        },
        { 
            label: 'Cádiz',
            value: 'Cadiz'
        },
        // ...
    ],
    CastillaLaMancha: [
        {
            label: 'Guadalajara',
            value: 'Guadalajara'
        },
        {
            label: 'Toledo',
            value: 'Toledo'
        },
        // ...
    ],
    // ...
};

De este modo ya no nos hará falta acceder a las keys. Las keys debería ser algo que se conozca tanto en tiempo de desarrollo como en tiempo de compilación. De nuevo, siempre que sea posible y, evitar esta práctica debe estar justificado.

comunidadAutonoma.addEventListener('change', event => {
    const { value } = event.target;
    const provinces = values[value];

    provinces.forEach(province => {
        // Create option html element based on 
        // province.label and province.value
    });
});

Y sí, en este trozo de código estoy accediendo a una clave dinámica que no se conoce en tiempo de desarrollo ni compilación, pero minimiza futuros accesos y deja un objeto (values) más limpio. De todas formas, values es un map, por lo que tampoco es tan mala práctica.

También creo que todo el objeto values merece ir a un json que cargues al levantar la web. De este modo no mezclas la implementación del código con los datos de éste.


El uso de accesos a claves dinámicas y, sobretodo el uso de eval no es peligroso en sí. JavaScript es un lenguaje totalmente dinámico y seguro (cuando se cumplen con los guards pertinentes). La desventaja del eval es la performance.
JavaScript es un lenguaje interpretado, el parser compila el código JavaScript a código máquina en runtime, lo que le llaman Just in time compilation (JIT), pero la mayoría de engines de JavaScript tienen un preparser y lo que le llaman las hot functions o hot access que guarda en memoria los accesos a funciones y sus tipos que más a menudo se usan (como si de una caché se tratara) para tener mayor velocidad de ejecución. Cualquier código que se encuentre dentro del eval es siempre ignorado por el preparser y nunca optimizado, sólo resuelto una y otra vez en runtime cada vez que debe ejecutarse. Para hacerse una idea, a ojos del preparser, todo aquello que esté dentro del eval es mero texto; sólo el parser lo resolverá.
Dejo aquí un vídeo muy instructivo sobre todo este tema.


Por último, sigo dudando un poco sobre si esto es exactamente lo que preguntabas y esta respuesta resuelve tu escenario; no estoy del todo seguro.

En cualquier caso, espero que al menos haya podido divulgar un poco la mala práctica del eval.
Si, como digo, esta respuesta no se ajusta a tu pregunta, me lo comentas y encantado trataré de mejorarla.


EDIT: Añadir dinámicamente los option.

Primero, como ponía en los comentarios, todo el json podría añadir los datos de las localidades para cada una de las provincias. Podría ser simplemente una property más del objeto.

const values = {
    Andalucia: [
        { 
            label: 'Almería',
            value: 'Almeria',
            localidades: [
                { 
                    label: 'Mojácar',
                    value: 'Mojacar'
                },
                {
                    label: 'Roquetas de Mar',
                    value: 'Roquetas'
                }
            ]
        },
        // ...
    ], 
    // ...
};

Primero, dado que el objeto que mapea cada una de las opciones tiene esta estructura con value y label, podemos hacer una función que cree un tag option dado uno de estos objetos. Muy simple.

const createOption = obj => {
    const opt = document.createElement('option');
    opt.setAttribute('value', obj.value);
    opt.innerHTML = obj.label;
    return opt;
}

Veíamos como podíamos suscribirnos al evento de cambio de valor de la comunidad autónoma y, de ahí, sacar la provincia

comunidad.addEventListener('change', event => {
    const { value } = event.target;
    const provinces = values[value];
    updateProvinces(provinces);
});

Ahora, updateProvinces debe ser una función que, dado el array de provincias de la comunidad seleccionada, cree un option para cada una de ellas.

const updateProvinces = provinces => {
    cleanUpSelector(localidad);
    cleanUpSelector(provincia);

    provinces.forEach(p => {
        const option = createOption(p);
        provincia.appendChild(option);
    });
}

Antes de añadir los nuevos elementos option debemos eliminar los anteriores. En este caso también eliminamos las opciones del selector de localidades.
cleanUpSelector va a hacer eso, dado un selector cualquiera borrará su contenido y añadirá la opción void (la que he llamado la IDLE_SELECTOR_VALUE). En tu caso, tu IDLE_SELECTOR_VALUE era ese Seleccionar.

const cleanUpSelector = selector => {
    // Borramos el contenido del selector
    selector.innerHTML = '';

    // Añadimos la void option
    const idleSelectorOption = document.createElement('option');
    idleSelectorOption.setAttribute('value', IDLE_SELECTOR_VALUE)
    idleSelectorOption.innerHTML = '- Selecciona -';
    selector.appendChild(idleSelectorOption);
}

Análogamente podemos suscribirnos al evento de cambio de valor del selector de provincias para cambiar las opciones de las localidades. Muy similar.
La única diferencia notable es cómo obtenemos ese array de localidades, los datos.
Si bien localidades es un array propiedad del objeto provincia...

const getSelectedCom = _ => 
    comunidad.options[comunidad.selectedIndex].value;

const getSelectedProvince = value => {
    const provinces = values[getSelectedCom()];
    return provinces.find(p => p.value === value);
}

... obtenemos el valor de la comunidad autónoma seleccionada, obtenemos todas las provincias de ésta y filtramos aquella que tenga por valor el value, que es el valor seleccionado.
Todo este proceso puede hacerse de forma mucho más elegante teniendo algunas variables con esa información. Por ejemplo, la comunidad autónoma seleccionada o el array de provincias.

Por último, y dado que tenemos ese void option, debemos preocuparnos qué pasa cuando se selecciona esa opción. Para darte una idea, yo sólo borro todas las opciones en cascada, pero podrías implementar tu propia lógica para cada caso.

comunidad.addEventListener('change', event => {
    const { value } = event.target;

    if (value === IDLE_SELECTOR_VALUE) {
        cleanUpSelector(provincia);
        cleanUpSelector(localidad);
        return;
    }

    const provinces = values[value];
    updateProvinces(provinces);
});

En caso que en el selector de comunidad autónoma se seleccione ese valor, sólo borramos las opciones de localidad y provincia llamando a la función cleanUpSelector.
En el caso de la provincia, sólo borraríamos el selector de localidades.

Te dejo aquí el ejemplo completo.
Esta implementación es bastante hand-made, realmente. Con otros frameworks se haría sumamente más sencillo; con jQuery (por favor, no), Angular, Vue... cualquiera que tenga un binding de datos consistente entre la vista y el code behind ([(ngModel)], ngFor, v-for, ...).

Espero que sirva.

5
  • ¡Muchas gracias! Voy a probarlo ahora mismo. Creo que sí es lo que quería... Pruebo y comento. Pero me queda una duda... ¿Cómo hago para el select de localidad según la provincia? ¿Se le podría añadir ahí? ¿O sería por ejemplo de esta forma? const valuesLocalidad = { Almeria : [ { label : "Abla", value : "Abla" }, //... ], //... }; (Y también añadiendo "locations" al estilo de provinces que se llamase en el evento change de provincia...) Yo creo que se trata de esto segundo, porque no sé cómo se lo podría añadir a la que tú me has sugerido. el 23 may. 2020 a las 16:49
  • 1
    Del mismo modo podría hacerse. Expandir más el set values y añadir otro eventListener al select de provincias. Cuando el valor de las provincias cambie añades las options en el select de localidades basadas en el value de la provincia seleccionada. Con lo que te respondí es sencillo de hacer.
    – VRoxa
    el 23 may. 2020 a las 18:56
  • Para las provincias me ha funcionado pefectamente... ¿con ampliar te refieres a algo así? const values = { Andalucia: [ { label: 'Almeria', value: 'Almería', localidades: [ { label: 'Abra', value: 'Abra' }, //... ] }, // ... ], // ... }; Añadiendo también: localidad.addEventListener('change', event => { const { value } = event.target; const locales = values.localidades[value]; locales.forEach(local => { // Create option html element based on // local.label and local.value }); }); ¡Gracias! el 23 may. 2020 a las 19:52
  • Es un poco complicado leer el código en el comentario... Voy a ampliar un poco la respuesta.
    – VRoxa
    el 23 may. 2020 a las 22:18
  • ¡Estupendo! Me ha servido a la perfección! ¡Muchas gracias! el 24 may. 2020 a las 0:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.