有没有办法在包含html的变量中进行循环？

Question

我正在尝试设置一个从ajax调用中获取options的select按钮。

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

在ajax调用内部，您可以创建一个字符串变量并使用您喜欢的任何循环(for循环)来设置它，然后在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 2

使用reduce和ES6字符串模板

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

var result = `<select>${options}</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
}