Skip to main content
3 de 3
Evitar actualización dentro de ciclo
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", creando el HTML necesario que se agrega con el método append() de jQuery al salir del ciclo:

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
 }
];
// Inicializar nuevo contenido
let html = '';
// 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"
   html += '<div class="check"><input class="opcion-input" type="checkbox" value="'
        + item.nombre + '"><label class="opcion-label" for="' + item.nombre + '">'
        + item.nombre +'</label></div>';
});
// Actualizar nombres
 $('div.nombres').append(html);
<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