Skip to main content
2 de 3
Actualizar con append() en lugar de crear más variables y html()
Triby
  • 25.2k
  • 3
  • 18
  • 36

El contenedor que debes actualizar es el que tiene la clase "nombres", de lo contrario, se van a sobrescribir los dos existentes con clase "check".

Cuando recorres el arreglo con personas.forEach(function(item) { ... }) no es necesario crear otro ciclo dentro, ni variables adicionales, puedes acceder directamente a item.nombre.

Finalmente, tanto el checkbox como la etiqueta a agregar deben estar dentro de otro div con clase "check" y se puede actualizar directamente el contenedor usando el método append() de jQuery:

let personas = [
 {
   "nombre": "María",
   "genero": "Mujer",
   "edad": 21
 },
{
   "nombre": "Ernesto",
   "genero": "Hombre",
   "edad": 45
 },
{
   "nombre": "María",
   "genero": "Mujer",
   "edad": 21
 },
{
   "nombre": "Paco",
   "genero": "Hombre",
   "edad": 12
 }
];

// Recorrer personas
personas.forEach(function(item) {
    // No se requiere otro ciclo, solo asignar directamente los valores
    // Creando checkbox y etiqueta dentro de contenedor con clase "check"
    // Agregar contenido directamente
    $('div.nombres').append('<div class="check"><input class="opcion-input" type="checkbox" value="'
        + item.nombre + '"><label class="opcion-label" for="' + item.nombre + '">'
        + item.nombre +'</label></div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nombres">
        <div class="check">
           <input class="opcion-input" type="checkbox" value="Isabel">
           <label class="opcion-label" for="Isabel">Isabel</label>
        </div>
        <div class="check">
            <input class="opcion-input" type="checkbox" value="Juan">
            <label class="opcion-label" for="Juan">Juan</label>
        </div>
</div>

Triby
  • 25.2k
  • 3
  • 18
  • 36