Cómo Generar Dinámicamente Opciones para un Select desde Datos JSON en JavaScript

por
Tiempo de lectura: 2 minutos
Foto de Pixabay

En este ejemplo vamos a ver cómo generar dinámicamente opciones para un elemento select en HTML utilizando datos JSON y JavaScript.

Primero muestro el array de elementos que vamos a usar de ejemplo:

const datosJSON = [
  { id: 1, nombre: "NombreDevCodelight1" },
  { id: 2, nombre: "NombreDevCodelight2" },
  { id: 3, nombre: "NombreDevCodelight3" }
];

Después, crearemos una función llamada crearSelect que tomará los datos del JSON y generará las opciones para un elemento select en HTML

   function crearSelect(json) {
      var select = document.getElementById("idselect");

      for (let i = 0; i < json.length; i++) {
        var option = document.createElement("option");
        option.text = json[i].nombre;
        option.value = json[i].id;
        select.add(option);
      }
    }

A continuación, muestro el código completo usado para el ejemplo.

<!DOCTYPE html>
<html>
<head>
  <title>Generar Select desde JSON</title>
</head>
<body>
  <select id="idselect">
    <!-- Aquí se agregarán las opciones -->
  </select>

  <script>
     const datosJSON = [
  { id: 1, nombre: "NombreDevCodelight1" },
  { id: 2, nombre: "NombreDevCodelight2" },
  { id: 3, nombre: "NombreDevCodelight3" }
  ];

    function crearSelect(json) {
      var select = document.getElementById("idselect");

      for (let i = 0; i < json.length; i++) {
        var option = document.createElement("option");
        option.text = json[i].nombre;
        option.value = json[i].test_index;
        select.add(option);
      }
    }

    // Llamar a la función con el JSON de ejemplo
    crearSelect(datosJSON);
  </script>
</body>
</html>

Por último, muestro como queda nuestro elemento select.

Espero que les sirva de ayuda. ¡Que tengan un feliz día!

Post Views: 18

Deja un comentario