Перечислить список JSON и обернуть каждый объект списка тегом span

Question

data.MaritalStatuses содержит несколько значений семейных статусов, и я хочу, чтобы они обернули тег span для каждого значения семейного статуса и добавили их в td # maritalStatuses. В этом случае это добавление значений без их обертывания в тегах span. Как я могу улучшить это?

table += '<tr><td id="maritalStatuses">Marital Status</td><td>' + $.each(data.MaritalStatuses, function (index, value) { 
    items.push('<span class="tags">' + value + '</span>'); 
}); $("#maritalStatuses").append(items); + '</td></tr>'; 

Answer 1

Вы можете использовать $.map() для создания массива списка статуса, а затем Array.join() создать строку из него

table += '<tr><td id="maritalStatuses">Marital Status</td><td>'; 
if (data.MaritalStatuses.length) { 
    table += $.map(data.MaritalStatuses, function (value) { 
     return '<span class="tags">' + value + '</span>'; 
    }).join('') 
} else { 
    table += 'None'; 
} 
table += '</td></tr>'; 
$("#maritalStatuses").append(table); 

Answer 2

Asuming data.MaritalStatuses является Array, вы бы лучше использовать Array.prototype.map и Array.prototype.join вместо из $.each

table += '<tr><td id="maritalStatuses">Marital Status</td><td>' + 
    data.MaritalStatuses.map(function (index, value) { 
     return '<span class="tags">' + value + '</span>'; 
    }).join('') + 
    '</td></tr>'; 

Answer 3

var textvalues=''; 
$.each(data.MaritalStatuses, function (index, value) { 
    textvalues+='<span class="tags">' + value + '</span>'; 
}); 
$("#maritalStatuses").append(textvalues) 

Answer 4

Попробуйте следующее ...

Html ...

<table border="1"> 
    <tr id="maritalStatuses"> 
     <td >Marital Status</td> 
    </tr> 
</table> 

JQuery ...

$(window).load(function(){ 
var data = {MaritalStatuses:['married','single','married']}, 
    mStatus = ''; 

$.each(data.MaritalStatuses, function (index, value) { 
    mStatus += '<span class="tags">dd' + value + '</span>'; 
}); 

$("#maritalStatuses").append('<td>'+mStatus+'</td>');   
});