Javascript jQuery使用数据中的元素创建div
我有一个html模板,我用jQueryPost在页面加载时获取数据。我想使用foreach和basic创建模板div。我的意思是我想尽我所能把它弄干净。我的数据是一个对象数组。我通过以下方式获取数据:Javascript jQuery使用数据中的元素创建div,javascript,jquery,arrays,Javascript,Jquery,Arrays,我有一个html模板,我用jQueryPost在页面加载时获取数据。我想使用foreach和basic创建模板div。我的意思是我想尽我所能把它弄干净。我的数据是一个对象数组。我通过以下方式获取数据: const emailData = async () => { var offset = 0; var limit = 10; const values = {offset : offset, limit: limit} const res = await PostService.get
const emailData = async () => {
var offset = 0;
var limit = 10;
const values = {offset : offset, limit: limit}
const res = await PostService.getCaseDetails(URL, values);
res.forEach((obj) => {
$('.ListLine').append(html(obj.id, obj.date, obj.from, obj.subject))
}
)
}
我的数据是:
[
{
"id": 1,
"projectName": "Project Name 1",
"date": "03.15.2021",
"from": "Name 1",
"subject": "Example folder",
"lastLegalSituation": "DURUM"
},
{
"id": 2,
"projectName": "Project Name 2",
"date": "03.15.2021",
"from": "Name 2",
"subject": "Example folder1",
"lastLegalSituation": "DURUM"
},
{
"id": 3,
"projectName": "Project Name 3",
"date": "03.15.2021",
"from": "Name 3",
"subject": "Example folder2",
"lastLegalSituation": "DURUM"
}
]
和我的模板:
<div class="ListTitle pl-3">
<div class="row">
<span class="col-lg-2 CheckColon">
<div class="ChackRadio">
<label>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
</span>
<span class="col-lg-2">
04.02.2020
</span>
<span class="col-lg-2">
First Name - Last Name
</span>
<span class="col-lg-3">
Example Folder
</span>
<span class="col-lg-3">
+ New Mail
</span>
</div>
</div>
<div class="Dotted">
<span></span>
<span></span>
<span></span>
</div>
<div class="DottedMenu">
<span onclick="OverlayOpen('OverlayEditIdCard')"><i class="Replay"></i>Yanıtla</span>
<span onclick="OverlayOpen('OverlayEditIdCard')"><i class="ReplayAll"></i>Tümünü yanıtla</span>
<span onclick="OverlayOpen('OverlayDeleteIdCard')"><i class="Delete"></i>Sil</span>
</div>
04.02.2020
名-姓
示例文件夹
+新邮件
亚努特拉
蒂姆·努扬特拉
Sil
我想做的是:
const html = (id, date, from, subject) => {
return (
" <div id=" +
id +
' class="ListTitle pl-3">\n' +
"\n" +
' <div class="row">\n' +
' <span class="col-lg-2 CheckColon">\n' +
' <div class="ChackRadio">\n' +
" <label>\n" +
' <input type="checkbox">\n' +
' <span class="checkmark"></span>\n' +
" </label>" +
" </div>\n" +
" </span>\n" +
' <span class="col-lg-2">\n' +
date +
" </span>\n" +
' <span class="col-lg-2">\n' +
from +
" </span>\n" +
' <span class="col-lg-3">\n' +
subject +
" </span>\n" +
"\n" +
' <span class="col-lg-3">\n' +
" + Yeni Mail\n" +
" </span>\n" +
"\n" +
" </div>\n" +
" </div>\n" +
' <div class="Dotted">\n' +
" <span></span>\n" +
" <span></span>\n" +
" <span></span>\n" +
" </div>\n" +
' <div class="DottedMenu">\n' +
' <span onclick="OverlayOpen(\'OverlayEditIdCard\')"><i class="Replay"></i>Yanıtla</span>\n' +
' <span onclick="OverlayOpen(\'OverlayEditIdCard\')"><i class="ReplayAll"></i>Tümünü yanıtla</span>\n' +
' <span onclick="OverlayOpen(\'OverlayDeleteIdCard\')"><i class="Delete"></i>Sil</span>\n' +
" </div>"
);
};
consthtml=(id、日期、发件人、主题)=>{
返回(
“您可以轻松地使用模板文本
consthtml=(id、日期、发件人、主题)=>{
返回`
${date}
${from}
${subject}
耶尼邮件
亚努特拉
蒂姆·努扬特拉
Sil
`;
}
您可能希望查看一下模板库/引擎,或者让您的live(html()
)更简单一些。