jQuery使用来自数据的元素创建div

Question

我有一个html模板和im在页面加载时用jquery post获取数据。我想用foreach创建模板div并且尽可能的基本。我的意思是我想尽可能地把它弄干净。我的数据是一个对象数组。我通过以下方式获取数据：

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>

我想做的是：

  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>"
);
};

任何帮助都是感激的。

Answer 1

您可以轻松地使用模板文字。

模板文字（模板字符串）

const html = (id, date, from, subject) => {
    return `

    <div id="${id}" 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">${date}</span>
            <span class="col-lg-2">${from}</span>
            <span class="col-lg-3">${subject}</span>
            <span class="col-lg-3">Yeni 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>
    `;
}