3

Estoy intentando rellenar un <select> a partir de los datos almacenados en un array JSON. Mi código es el siguiente:

applications = {
  "apps": [
    { "app":"app_uno", "buzon":"buzon_uno" },
    { "app":"app_dos", "buzon":"buzón_dos" }
  ]
};

function fillSelector(options_list) {	
  var options = options_list; 
  var modelList = document.getElementById("select_form"); 
  for (var i in options.apps) { 
    var opt = options.apps[i].app; 
    modelList.options.add(opt);
  }
} 

fillSelector(applications);
<select id="select_form">
  <option value="">Seleccione una opción</option>
<select>

En este ejemplo tendría que almacenar en "opt" los valores "uno", "dos", etc. No sé dónde está el problema ya que nunca he utilizado JSON, esta vez es la primera que lo uso.

1 respuesta 1

2

El problema no lo estás teniendo al recorrer JSON, que es correcto. El problema es al añadir la opción al select porque con select.options.add se espera que lo que estés pasando sea un elemento de tipo option pero estás pasando un objeto que no lo es.

Para solucionar eso, podrías crear un option y pasárselo al add. Aquí dejo tu código con los cambios comentados:

applications = {
  "apps": [
    { "app":"app_uno", "buzon":"buzon_uno" },
    { "app":"app_dos", "buzon":"buzón_dos" }
  ]
};

function fillSelector(options_list) {	
  var options = options_list; 
  var modelList = document.getElementById("select_form"); 
  for (var i in options.apps) { 
    // creamos un elemento de tipo option
    var opt = document.createElement("option");
    // le damos un valor
    opt.value = options.apps[i].app;
    // le ponemos un texto
    opt.textContent = options.apps[i].buzon;
    // lo agregamos al select
    modelList.options.add(opt);
  }
} 

fillSelector(applications);
<select id="select_form">
  <option value="">Seleccione una opción</option>
<select>

1
  • Muchas gracias Alvaro! Commented el 7 jul. 2018 a las 12:43

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.