CODEWITHSUNDEEP
jqueryforeachappend
Hernan Humaña
Hernan Humaña

Reputation: 433

append inside a foreach in JQUERY

Hi friends i use a foreach and inside i show html with .append, this is when i execute a modal, this is the code:

    $('#modalEditProducts').on('show.bs.modal', () => {
    arrayProducts.forEach((q) =>{
        $('#modalHERE')
        .append('<div style="width: 100%; text-align: center;">'+
                  '<img src="'+q.photo+'" width="40%">'+
                '</div>'+
                '<div style="width: 70%;">'+
                 '<form>'+  
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 1:</label>'+
                      '<input type="text" class="form-control" value="valor1" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 2:</label>'+
                      '<input type="text" class="form-control" value="valor2" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                    '<label for="recipient-name" class="col-form-label">valor 3:</label>'+
                    '<input type="text" class="form-control" value="valor3" id="recipient-name">'+
                  '</div>'+
                 '</form>'+
                '</div>');
     })
})

the problem is when i close the model and i back open this, the data is show doubled... i checked my array and this is not doubled, is how if the foreach save the data, i dont know, please can you say me what its my error? or how i can solve that?

if you need more data, please i say me, thanks.

Upvotes: 0

Views: 7915

Answers (2)

vinayakj
vinayakj

Reputation: 5681

Replace .append with .html. To add multiple elements to modal, you need to loop and create template first & then add it to modal

you are using .append which keeps on appending the template, So use .html API which replaces existing template with new one.

$('#modalEditProducts').on('show.bs.modal', () => {
    var template = "";
    arrayProducts.forEach((q) =>{
    template +='<div style="width: 100%; text-align: center;">'+
                  '<img src="'+q.photo+'" width="40%">'+
                '</div>'+
                '<div style="width: 70%;">'+
                 '<form>'+  
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 1:</label>'+
                      '<input type="text" class="form-control" value="valor1" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 2:</label>'+
                      '<input type="text" class="form-control" value="valor2" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                    '<label for="recipient-name" class="col-form-label">valor 3:</label>'+
                    '<input type="text" class="form-control" value="valor3" id="recipient-name">'+
                  '</div>'+
                 '</form>'+
                '</div>';

     })
     $('#modalHERE')
        .html(template );
}

 )

Upvotes: 1

Cesar Bielich
Cesar Bielich

Reputation: 4945

The problem is that you are appending the form over and over again without clearing it first. Clear the html first then reload the loop

$('#modalEditProducts').on('show.bs.modal', () => {
$('#modalHERE').html('');
arrayProducts.forEach((q) =>{
    $('#modalHERE')
    .append('<div style="width: 100%; text-align: center;">'+
              '<img src="'+q.photo+'" width="40%">'+
            '</div>'+
            '<div style="width: 70%;">'+
             '<form>'+  
                '<div class="form-group">'+
                  '<label for="recipient-name" class="col-form-label">valor 1:</label>'+
                  '<input type="text" class="form-control" value="valor1" id="recipient-name">'+
                '</div>'+
                '<div class="form-group">'+
                  '<label for="recipient-name" class="col-form-label">valor 2:</label>'+
                  '<input type="text" class="form-control" value="valor2" id="recipient-name">'+
                '</div>'+
                '<div class="form-group">'+
                '<label for="recipient-name" class="col-form-label">valor 3:</label>'+
                '<input type="text" class="form-control" value="valor3" id="recipient-name">'+
              '</div>'+
             '</form>'+
            '</div>');
 })

})

Upvotes: 1

Related Questions