Insertion of HTML elements within another HTML Generated with Jquery in the same function

Question

In my following code below I would like to insert the data coming from the ajax request, along with the append() HTML only in the elements whose Hidden input id was equal to the item.id (of objItens). But all the ways I’ve imagined don’t work. Any hint on how I can best implement this?

 function listaItensPorIdExecCadeia(objIdExecCadeia){

    var idExecucaoDaCadeia = [];

    objIdExecCadeia.map(cadeia => {

        $('#bloco-procedimento-lista-itens').append(`
        <h4>${cadeia.nome} #${cadeia.id}</h4>
        <input id="inputIdExecucaoDaCadeia" type="hidden" value="${cadeia.id}" /> 
        <ul id="procedimento-lista-itens" class="list-group">  
        </ul>     
        `);
        idExecucaoDaCadeia.push(cadeia.id);
    });

    for(var i = 0; i <= idExecucaoDaCadeia.length; i++){

        $.get(BASE_URL+'item/listar',{
            idItem: idExecucaoDaCadeia[i],
        },
        function(objResponse){

            var objItens = objResponse.strMessage;

            objItens.map(item => {
                    $('#procedimento-lista-itens').append(`
                    <li class="list-group-item cadeia-itens-lista">
                        <p>${item.nome}</p>
                        <div>
                            <a class="btn btn-default"><i class="fa fa-qrcode"></i></a>
                            <a class="btn btn-primary"><i class="fa fa-info-circle"></i></a>
                            <a class="btn btn-warning"><i class="fa fa-edit"></i></a>   
                            <a class="btn btn-danger"><i class="fa fa-times"></i></a>   
                        </div>
                    </li>          
                `);
            })
        },'JSON'
        );
    }
}

Answer 1

Turns out you’re creating elements with id duplicated in your DOM which is nothing recommended, add a unique identifier to your dynamic elements.

function listaItensPorIdExecCadeia(objIdExecCadeia){

    var idExecucaoDaCadeia = [];

    objIdExecCadeia.map(cadeia => {

        $('#bloco-procedimento-lista-itens').append(`
        <h4>${cadeia.nome} #${cadeia.id}</h4>
        <input id="inputIdExecucaoDaCadeia" type="hidden" value="${cadeia.id}" /> 
        <ul id="procedimento-lista-itens_${cadeia.id}" class="list-group">  
        </ul>     
        `);
        idExecucaoDaCadeia.push(cadeia.id);
    });

    for(var i = 0; i <= idExecucaoDaCadeia.length; i++){

        $.get(BASE_URL+'item/listar',{
            idItem: idExecucaoDaCadeia[i],
        },
        function(objResponse){

            var objItens = objResponse.strMessage;

            objItens.map(item => {
                    $('#procedimento-lista-itens_'+idExecucaoDaCadeia[i]).append(`
                    <li class="list-group-item cadeia-itens-lista">
                        <p>${item.nome}</p>
                        <div>
                            <a class="btn btn-default"><i class="fa fa-qrcode"></i></a>
                            <a class="btn btn-primary"><i class="fa fa-info-circle"></i></a>
                            <a class="btn btn-warning"><i class="fa fa-edit"></i></a>   
                            <a class="btn btn-danger"><i class="fa fa-times"></i></a>   
                        </div>
                    </li>          
                `);
            })
        },'JSON'
        );
    }
}

Below I left an example removing your query from the details items and simulating the result.

var cadeias = [{id: 1, nome: "teste"}, { id: 2, nome: "teste 2"}];
var itens = [{ cadeiaId: 1, nome: "sub teste 1 - 1"}, { cadeiaId: 1, nome: "sub teste 1 - 2"}, { cadeiaId: 2, nome: "sub teste 2 - 1"}, {cadeiaId: 2, nome: "sub teste 2 - 2"}];


function listaItensPorIdExecCadeia(objIdExecCadeia) {

  var idExecucaoDaCadeia = [];

  objIdExecCadeia.map(cadeia => {

    $('#bloco-procedimento-lista-itens').append(`
        <h4>${cadeia.nome} #${cadeia.id}</h4>
        <input id="inputIdExecucaoDaCadeia" type="hidden" value="${cadeia.id}" /> 
        <ul id="procedimento-lista-itens_${cadeia.id}" class="list-group">  
        </ul>     
        `);
    idExecucaoDaCadeia.push(cadeia.id);
  });

  for (var i = 0; i <= idExecucaoDaCadeia.length; i++) {

    var objItens = jQuery.grep(itens, function(n,j){
      return n.cadeiaId === idExecucaoDaCadeia[i];
    });

    objItens.map(item => {
      $('#procedimento-lista-itens_'+idExecucaoDaCadeia[i]).append(`
                    <li class="list-group-item cadeia-itens-lista">
                        <p>${item.nome}</p>
                        <div>
                            <a class="btn btn-default"><i class="fa fa-qrcode"></i></a>
                            <a class="btn btn-primary"><i class="fa fa-info-circle"></i></a>
                            <a class="btn btn-warning"><i class="fa fa-edit"></i></a>   
                            <a class="btn btn-danger"><i class="fa fa-times"></i></a>   
                        </div>
                    </li>          
                `);
    });

  }

}

listaItensPorIdExecCadeia(cadeias);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="bloco-procedimento-lista-itens"></div>
</body>
</html>