jQuery create div with elements from data

Question

I have a html template and im getting data with jquery post on page load. I want to create the template div with using foreach and as basic as i can. I mean i want to do it clean as much as i can. My data is an array of objects. Im getting my data with :

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

}

My data is :

[
{
    "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"
}

]

And my template :

<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>

What I tried to do :

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

Any helps will be thankful.

You might want to have a look at a template library/engine or template literals to make your live (html()) a little easier. — Andreas
– Andreas, Commented Mar 15, 2021 at 14:12

steven7mwesigwa · Accepted Answer · 2021-03-15 14:43:21Z

You could use template literals with ease.

Template literals (Template strings)

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>
    `;
}

Collectives™ on Stack Overflow

jQuery create div with elements from data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related