如何用javascript填充列表组?

Question

我使用下面的代码从控制器获取票证数据:

$.ajax({
type: "GET",
url: "/Tickets/List/",
data: param = "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
var ds = [];
// d.ticket_no, d.ticket_subject, d.ticket_date,
data.forEach((d) => {

});
}

我不知道如何使用下面的HTML格式显示它?

<a class="list-group-item list-group-item-action" id="list-tickets-list" data-toggle="tab" 
href="#ticket-info" role="tab" aria-controls="list-tickets">
<div class="d-flex w-100 justify-content-between">
<h5 id="ticket_subject" class="mb-1">**Ticket Subject Example**</h5>
<small id="ticket_date">**02-Aug-2021**</small>
</div>
<p id="ticket_no" class="mb-1"><strong>**TKT-2021010678**</strong></p>

Answer 1

var data = [{
"ticket_no":1234,
"ticket_subject":"myticker",
"ticket_date":"1-2-3"
},{
"ticket_no":1235,
"ticket_subject":"myticker1",
"ticket_date":"1-2-4"
}];
var mydiv = document.getElementById('ticketdiv');
data.forEach((d) => {
mydiv.innerHTML +=`<a class="list-group-item list-group-item-action" id="list-tickets-list" data-toggle="tab" 
href="#ticket-info" role="tab" aria-controls="list-tickets">
<div class="d-flex w-100 justify-content-between">
<h5 id="ticket_subject" class="mb-1">${d.ticket_subject}</h5>
<small id="ticket_date">${d.ticket_date}</small>
</div>
<p id="ticket_no" class="mb-1"><strong>${d.ticket_no}</strong></p>`
});

<div id="ticketdiv">
</div>

你可以使用JSinnerHTML来完成它，这里我所做的是循环从foreach的数据，并通过mydiv.innerHTML +=添加HTML内容到div

你可以在这里阅读更多关于JS innerHTML的内容