Есть ли способ сделать цикл внутри переменной, которая содержит HTML

Question

Я пытаюсь установить кнопку select, которая получает options от вызова ajax.

Работает вызов ajax.Проблема в том, когда я пытаюсь создать переменную, которая содержит HTML.Я не знаю способ итерации и создания нескольких option внутри переменной.

Это вызов ajax:

$.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>';
        }
      });

Я добавил tipo_comprobante.forEach(row){}, чтобы показать, что яхочу сделать.

Answer 1

С шаблонами Reduce и ES6 String

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

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

Answer 2

Внутри вызова ajax вы можете создать строковую переменную и использовать любой цикл (для цикла), который хотите установить, а затем использовать переменную внутри вызова ajax в нужном месте в html.

var myOptionsValues = ['cat', 'dog', 'fish'];
var myOptionsHtml = '';
myOptions.forEach(function (optionValue) {
    myOptionsHtml+='<option value="' + optionValue + '">' + optionValue + '</option>';
});

var myHtmlForAjax = '<select>' + myOptions + '</select>';

Answer 3

Да. Просто добавьте его в элемент DOM, затем используйте .children, чтобы получить его в виде массива:

/* a string with HTML text */
const someString = `
    <p>Paragraph1</p>
    <p>Paragraph2</p>
    <p>Paragraph3</p>
`;

/* create a temporary element */
const temp = document.createElement("div");

/* add the HTML text to that element */
temp.innerHTML = someString;

/* create the array */
const array = Array.from(temp.children);

/* loop */
for(let i = 0; i < array.length; i++){
    const p = array[i];
    alert(p); // or do whatever
}