javascript - Is there a way to loop inside a variable which contains html

Question

I'm trying to set a select button which gets the options from an ajax call.

The ajax call is working. The problem is when I try to create the variable which contains the html. I don't know the way to iterate and create multiple option inside the variable.

This is the ajax call:

$.ajax({
        url: '/facturas/data',
        type: 'GET',
        success: function(s) {
            var currency = s.currency;
            var rendiciones = s.rendiciones;
            var tipo_comprobante = s.tipo_comprobante;
            var tipo_gasto = s.tipo_gasto;
            var fm_table_row =  '<td>'+
                                    '<div class="inputfield"><select name="fm_tipo_comp_select"><option value="" disabled="" selected="">Comprobante</option>'+
                                    tipo_comprobante.forEach(row){
                                        '<option value="id">nombre</option>'+
                                    }
                                    '</select><label>Tipo comprobante</label></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><select name="fm_tipo_gasto"><option value="" disabled="" selected="">Tipo gasto</option>'+
                                    '<option value="id">nombre </option>'+
                                    '</select><label>Tipo gasto</label></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="validate right-align" id="fm_serie" type="text" name="fm_serie" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="validate right-align" id="fm_ndoc" type="text" name="fm_ndoc" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="validate right-align" id="fm_ruc" type="text" name="fm_ruc" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="validate right-align" id="fm_rs" type="text" name="fm_rs" disabled="disabled" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="datepicker validate" id="fm_fecha" type="text" name="fm_fecha" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><select name="fm_moneda"><option value="" disabled="" selected="">Moneda</option>'+
                                    '<option value="id">nombre </option>'+
                                    '</select><label>Moneda</label></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="validate" id="fm_monto" type="number" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><select name="fm_retencion"><option value="" disabled="" selected="">Retención</option>'+
                                    '<option value="id">nombre </option>'+
                                    '</select><label>Retención</label></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><a class="btn-floating btn-small waves-effect waves-light red delete-btn"><i class="material-icons">delete</i></a></div>'+
                                '</td>';
        }
      });

I added the tipo_comprobante.forEach(row){} to show what I want to do.

标签： javascripthtmlajax

Answer 1

With reduce and ES6 String templates

var options = ['cat', 'dog', 'fish'].reduce((acc, value) => 
  acc + `<option value="${value}">${value}</option>`, '');

var result = `<select>${options}</select>`;