0

me gustaría poder crear un bucle creando filas de una tabla html dentro de un modal al abrirlo, actualmente utilizo la herramienta de map de javascript y crea múltiples filas al abrir el modal una y otra vez cada vez que se abre, cuando el funcionamiento correcta es sólo una vez. Anexo el código para una mejor comprensión del problema:


$(document).ready(function() { $(".editAttribute").click(function() { //Función al oprimir el botón del modal para visualizar la tabla
Object.keys(attributesJson).map(key=>{ //Iteración con la herramienta map para recorrer mi objeto (Aclaro que está en JSON)
    attributesJson[key].map((values, index)=>{  //Procede a crear filas HTML
       var html = '<tr style="text-align: center;">';
           html += '<td class="col-md-5 offset-md-2"><input type="text" name="tituloAttribute[]" readonly value="'+values.titulo+'" class="form-control inputs"/></td>';
           html += '<td class="col-md-5 offset-md-2"><input type="text" name="contenidoAttribute[]" value="'+values.contenido+'" class="form-control inputs"/></td>';
    $('#contentAttributesActivo').append(html);

    });
});

});  

Anexé el código necesario para entender cual es la problemática, al realizar la función de abrir el modal, crea las fila del html, pero al cerrar el modal y volverlo abrir, se concatena creando aún más filas cuando debería de mantener una sola vez la tabla. Espero puedan ayudarme

3
  • Simplemente agrega $('#contentAttributesActivo').html("") antes de map()
    – alanfcm
    el 19 feb. 2020 a las 18:49
  • ¿Cómo es posible que funcione lo que me sugieres? Si dentro del append va la variable 'html' que se genera gracias a los datos proporcionados por el map, es decir, la linea $('#contentAttributesActivo').append(html); imprime dentro del append la variable html, si lo pongo antes ocurrirá un error de no definirla el 19 feb. 2020 a las 18:58
  • 1
    html() no es una variable, es una funcion de jQuery
    – alanfcm
    el 19 feb. 2020 a las 19:01

2 respuestas 2

1

Debes limpiar la variable html

A continuación te dejo un refactor del código de cómo yo lo haría

Déjame saber si la respuesta te sirve

    $(document).ready(function () {
        var attributesJson = [
            {"titulo": "Titulo 1","contenido": "Contenido 111111111 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, ratione."},
            {"titulo": "Titulo 2","contenido": "Contenido 222222222 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, vitae."},
            {"titulo": "Titulo 3","contenido": "Contenido 333333333 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, repudiandae."},
            {"titulo": "Titulo 4","contenido": "Contenido 444444444 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, nihil."},
            {"titulo": "Titulo 5","contenido": "Contenido 555555555 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, esse!"}
        ];
        $("button").click(function () {
            var html = "";
            attributesJson.map((values, index) => {
                html += '<tr style="text-align: center;">';
                html +=     '<td class="col-md-5 offset-md-2">';
                html +=         '<input type="text" name="tituloAttribute[]" readonly value="' + values.titulo + '" class="form-control inputs"/>';
                html +=     '</td>';
                html +=     '<td class="col-md-5 offset-md-2">';
                html +=         '<input type="text" name="contenidoAttribute[]" value="' + values.contenido + '" class="form-control inputs"/>';
                html +=     '</td>';
                html += '</tr>';
            });

            $('#contentAttributesActivo').empty().append(html);
        });
    });
2
  • Muchisimas gracias!! eso era, limpiar la variable html cada vez que realizaba su función, me ha ayudado muchisimo, se agradece. Sólo una última pregunta en el código que me brindaste, ¿Porqué al imprimir el html agregaste el 'empty'? el 19 feb. 2020 a las 20:51
  • Se me fue el empty, no me fije, era una prueba para limpiar el html pero igual no servía porque la variable seguía con el mismo valor el 20 feb. 2020 a las 20:48
1

Al volver a abrir el modal la variable html debe limpiarse al igual que el content en el html como tal:

var html;

$(document).ready(function() { $(".editAttribute").click(function() { //Función al oprimir el botón del modal para visualizar la tabla

html="";

  $('#contentAttributesActivo').html("");

    Object.keys(attributesJson).map(key=>{ //Iteración con la herramienta map para recorrer mi objeto (Aclaro que está en JSON)



    attributesJson[key].map((values, index)=>{  //Procede a crear filas HTML
       html = '<tr style="text-align: center;">';
           html += '<td class="col-md-5 offset-md-2"><input type="text" name="tituloAttribute[]" readonly value="'+values.titulo+'" class="form-control inputs"/></td>';
           html += '<td class="col-md-5 offset-md-2"><input type="text" name="contenidoAttribute[]" value="'+values.contenido+'" class="form-control inputs"/></td>';
    $('#contentAttributesActivo').append(html);

    });
});

});  
1
  • Muchisimas gracias, has tenido razón, al iniciar la función debo de limpiar la variable html, muchisimas gracias. el 19 feb. 2020 a las 20:53

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.