1

Tengo el siguiente json:

[
 {
   "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
 },
]

Necesito recogerlo e imprimirlo en la página como un listado de check options. Para ello he realizado el siguiente codigo: Personas se recoge del json en un archivo separado y se nombra a través de una variable como var personas en el que se recoge y la llamo en el javascript.

codigo js:

$check=$('div.check');
personas.forEach(function(item) {
        Object.keys(item).forEach(function(key) {
        key = "nombre";
        const array = item[key];
        $check.html('<input class="opcion-input" type="checkbox" value="'+array+
        '"><label class="opcion-label" for="'+array+ '">'+array+'</label>');
        })
      })

codigo html:

<html>
      <head>
      <head>
      <body>
       <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>
      </body>
</html>

El problema es que al tener solo dos opciones creadas reemplaza las que ya había y no añade todas las opciones, como podría hacer que me salieran todos los valores en vez de dos valores solamente?

1
  • Tu pregunta no es clara. ¿Quieres agregar los elementos con la misma estructura de los que ya existen: <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 ...?
    – A. Cedano
    Commented el 16 feb. 2021 a las 22:46

2 respuestas 2

3

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>

5
  • 3
    No es necesario obtener al principio todo el elemento: let html = $check.html(); podría ser poco práctico sobre todo en elementos grandes. Es mejor simplemente usar append() a la salida del bucle, para agregar el contenido que se haya creado. Algo así más o menos: $( ".nombres" ).append(html);
    – A. Cedano
    Commented el 16 feb. 2021 a las 22:51
  • @A.Cedano, tienes razón. Cada día se aprende algo nuevo, en un momento actualizo.
    – Triby
    Commented el 16 feb. 2021 a las 22:53
  • 1
    @A.Cedano, al contrario, gracias por la observación, porque tiene sentido, más vale optimizar rendimiento que tener código más corto; de hecho, leí tu comentario en la otra respuesta e inmediatamente me puse a editar.
    – Triby
    Commented el 16 feb. 2021 a las 23:01
  • 2
    Aquí te dejo la fuente, sobre el uso correcto de append(). La diferencia en rendimiento podría ser considerable, sobre todo cuando se trabaja con muchos datos.
    – A. Cedano
    Commented el 16 feb. 2021 a las 23:10
  • 1
    Muchísimas gracias por el tiempo y el esfuerzo en ayudarme :) tanto a ti como a @A.Cedano y Mauricio Contreras, ya me ha funcionado! Estaba empeñada en colocar en el div exterior pensando que reemplazaría todo el contenido y no conseguía hacerlo funcionar Commented el 16 feb. 2021 a las 23:49
1

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.

2
  • Usar append() o cualquier función que modifique el DOM dentro de un bucle es una mala práctica. Es mejor recoger todo en una variable y modificar el DOM una sola vez, no N veces, donde N es la cantidad de iteracciones. Si hay 1000 elementos estarás modificando el DOM 1000 veces y esto a la larga puede ser costoso.
    – A. Cedano
    Commented el 16 feb. 2021 a las 22:55
  • @Mauricio tu respuesta es igualmente valida que la respuesta superior muchisimas gracias por tu tiempo y esfuerzo en ayudarme, todos me habeis ayudado muchisimo! Gracias!! Commented el 16 feb. 2021 a las 23:50

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.