PROBLEMA
El problema es que estás sobre escribiendo todo el contenido del elemento div
cuya clase es check
. Por eso no estás obteniendo el resultado esperado.
Para lograr lo que te propones, deberías usar el método append()
de JQuery, en vez del método html()
que usas actualmente.
Otro problema es que no estarías añadiendo correctamente la información, ya que estás metiendo todo dentro de un mismo elemento div
de clase check
. Esto es porque la siguiente sentencia:
$check = $('div.check');
devuelve una lista de todos los elementos tipo div
con la clase check
.
SOLUCIÓN
Una forma de solventar el problema es usar el elemento div
cuya clase es nombre
. Aunque particularmente te sugiero que uses valores id
en vez de valores de clase, ya que de esta forma estarías refiriéndote a un único elemento.
Lo que debes pintar es la misma estructura de cada div
de clase check
para cada persona de la lista.
Esta estructura es:
<div class="check">
<input class="opcion-input" type="checkbox" value={{ valor dinámico}}>
<label class="opcion-label" for={{ valor dinámico }}>{{ valor dinámico }}</label>
</div>
donde valor dinámico
será el valor del nombre de la persona de la lista.
Para ello debes reescribir tu función para que se pinte el elemento adecuado, ya que estás recorriendo la lista de claves de cada objeto, podrías hacerlo de la siguiente forma:
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
},
];
let elementos = '';
personas.forEach(item => {
Object.keys(item).forEach(key => {
if(key === "nombre") {
const valor = item[key];
elementos += '<div class="check"><input class="opcion-input" type="checkbox" value="'+ valor + '"><label class="opcion-label" for="' + valor + '">' + valor + '</label></div>';
}
});
});
$('div.nombres').append(elementos);
<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>
Otra manera, sin necesidad de hacer la comprobación y asumiendo que cada objeto de la lista de personas tiene un campo llamado nombre
, sería:
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
},
];
let elementos = '';
personas.forEach(item => {
const nombre = item.nombre;
elementos += '<div class="check"><input class="opcion-input" type="checkbox" value="'+ nombre + '"><label class="opcion-label" for="' + nombre + '">' + nombre + '</label></div>';
});
$('div.nombres').append(elementos);
<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>
Espero que esto te ayude a resolver el problema.
<div class="check"> <input> ... <label> ... </div>
? ¿o quieres reemplazar lo que ya existen? ¿o qué quieres hacer exactamente? Y, ¿dónde quieres hacerlo? ¿Serían hijos de este elemento<div class="nombres">
, irían en el footer, en el header, en un elemento nuevo ...?