Use For in Javascript in an HTML concatenation

Question

Hello,

i am in a Javascript file and displaying an HTML table for it with an HTML concatenation, only I need to do a for in one of the table columns to display a select option, but to no avail.

Mode that is not working, I believe it is something from the concatenation of HTML (is between * or for):

function listAjustes(){
    $.ajax({
        type  : 'ajax',
        url   : 'diversos/show',
        async : false,
        dataType : 'json',
        success : function(data){
            var html = '';
            var i;
            for(i=0; i<data.diversos.length; i++){
                html += '<tr id="'+data.diversos[i].id+'">'+
                        '<th class="tabela_ajuste" scope="row">'+data.diversos[i].agencia+'</th>'+
                        '<td class="tabela_ajuste">'+data.diversos[i].mes+'</td>'+
                        '<td class="tabela_ajuste">'+data.diversos[i].ano+'</td>'+
                                                '<td class="tabela_ajuste">'+data.diversos[i].data_lancamento+'</td>'+
                                                '<td class="tabela_ajuste">'+data.diversos[i].data_entrada+'</td>'+
                                                '<td class="tabela_ajuste">'+data.diversos[i].conta_razao+'</td>'+
                                                '<td class="tabela_ajuste">'+data.diversos[i].centro_lucro+'</td>'+
                                                '<td class="tabela_ajuste">'+data.diversos[i].nome_usuario+'</td>'+
                                                '<td class="tabela_ajuste">'+data.diversos[i].chave_lancamento+'</td>'+
                                                '<td class="tabela_ajuste">'+data.diversos[i].texto+'</td>'+
                                                '<td class="tabela_ajuste">'+data.diversos[i].montante+'</td>'+
                                                '<td class="tabela_ajuste">'+data.diversos[i].conta_contabil+'</td>'+
                                                '<td ><select id="codigo" class="form-control" name="codigo" required="">'+
                                                    '<option value="">(Select)</option>'
                                              **for(j=0; j<data.codigos.length; j++){
                                                    '<option value="'+data.codigos[j].nome+'">'+data.codigos[j].nome+'</option>'
                                                }**

                                                '</td>'+
                        '<td style="text-align:right;">'+
                            '<a href="javascript:void(0);" class="btn btn-outline-info btn-sm editRecord" data-id="'+data[i].id+'" data-nome="'+data[i].nome+'" data-valor="'+data[i].valor+'" data-ano="'+data[i].ano+'">Editar</a>'+' '+
                            '<a href="javascript:void(0);" class="btn btn-outline-danger btn-sm deleteRecord" data-id="'+data[i].id+'">Excluir</a>'+
                        '</td>'+
                        '</tr>';
            }
            $('#listajustes').html(html);                   
        }
    });
    }

'Cause if I do it with just one element of right.

'<td ><select id="codigo" class="form-control" name="codigo" required="">'+
 '<option value="">(Select)</option>'+
 '<option value="'+data.codigos[0].nome+'">'+data.codigos[0].nome+'</option>'+
'</td>'

Answer 1

In addition to missing close the <select>, you could do the for of options once (since the same array comes data.codigos for all selects) instead of performing the same for several times within the for leading:

var opts = '';
for(j=0; j<data.codigos.length; j++){
   opts += '<option value="'+data.codigos[j].nome+'">'+data.codigos[j].nome+'</option>';
}

Then just concatenate the variable opts in the place where you were trying to do the for:

...
'<option value="">(Select)</option>'+
opts+
...

Behold:

data = {
   diversos: [
      { id: 1, agencia: "ag1", mes: "mes1", ano: "ano1" },
      { id: 2, agencia: "ag2", mes: "mes2", ano: "ano2" }
   ],
   
   codigos: [
      { nome: "nome1" },
      { nome: "nome2" },
      { nome: "nome3" }
   ]
}

function listAjustes(){

   var opts = '';
   for(j=0; j<data.codigos.length; j++){
      opts += '<option value="'+data.codigos[j].nome+'">'+data.codigos[j].nome+'</option>';
   }

   var html = '';
   var i;
   for(i=0; i<data.diversos.length; i++){
       html += '<tr id="'+data.diversos[i].id+'">'+
               '<th class="tabela_ajuste" scope="row">'+data.diversos[i].agencia+'</th>'+
               '<td class="tabela_ajuste">'+data.diversos[i].mes+'</td>'+
               '<td class="tabela_ajuste">'+data.diversos[i].ano+'</td>'+
               '<td class="tabela_ajuste"></td>'+
               '<td class="tabela_ajuste"></td>'+
               '<td class="tabela_ajuste"></td>'+
               '<td class="tabela_ajuste"></td>'+
               '<td class="tabela_ajuste"></td>'+
               '<td class="tabela_ajuste"></td>'+
               '<td class="tabela_ajuste"></td>'+
               '<td class="tabela_ajuste"></td>'+
               '<td class="tabela_ajuste"></td>'+
               '<td ><select id="codigo" class="form-control" name="codigo" required="">'+
                   '<option value="">(Select)</option>'+
                   opts+
               '</select></td>'+
               '<td style="text-align:right;">botões'+
               '</td>'+
               '</tr>';
   }
   $('#listajustes').html(html);                
}
listAjustes();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="listajustes" border=1></table>

Answer 2

Try this

function listAjustes(){
    $.ajax({
        type  : 'ajax',
        url   : 'diversos/show',
        async : false,
        dataType : 'json',
        success : function(data){
            var html = '';
            var i;
            for(i=0; i<data.diversos.length; i++){
                html += '<tr id="'+data.diversos[i].id+'">'+
                        '<th class="tabela_ajuste" scope="row">'+data.diversos[i].agencia+'</th> \
                        <td class="tabela_ajuste">'+data.diversos[i].mes+'</td> \
                        <td class="tabela_ajuste">'+data.diversos[i].ano+'</td> \
                        <td class="tabela_ajuste">'+data.diversos[i].data_lancamento+'</td> \
                        <td class="tabela_ajuste">'+data.diversos[i].data_entrada+'</td> \
                        <td class="tabela_ajuste">'+data.diversos[i].conta_razao+'</td> \
                        <td class="tabela_ajuste">'+data.diversos[i].centro_lucro+'</td> \
                        <td class="tabela_ajuste">'+data.diversos[i].nome_usuario+'</td> \
                        <td class="tabela_ajuste">'+data.diversos[i].chave_lancamento+'</td> \
                        <td class="tabela_ajuste">'+data.diversos[i].texto+'</td> \
                        <td class="tabela_ajuste">'+data.diversos[i].montante+'</td> \
                        <td class="tabela_ajuste">'+data.diversos[i].conta_contabil+'</td> \
                        <td ><select id="codigo" class="form-control" name="codigo" required=""> \
                        <option value="">(Select)</option>';

                        for(j=0; j<data.codigos.length; j++){
                            html += '<option value="'+data.codigos[j].nome+'">'+data.codigos[j].nome+'</option>'
                        }

                        $html += '</td> \
                        <td style="text-align:right;"> \
                            <a href="javascript:void(0);" class="btn btn-outline-info btn-sm editRecord" data-id="'+data[i].id+'" data-nome="'+data[i].nome+'" data-valor="'+data[i].valor+'" data-ano="'+data[i].ano+'">Editar</a> \
                            <a href="javascript:void(0);" class="btn btn-outline-danger btn-sm deleteRecord" data-id="'+data[i].id+'">Excluir</a>\
                        </td> \
                        </tr>';
            }
            $('#listajustes').html(html);                   
        }
    });
}