来自对象js的变量作为html id

Question

从3个小时开始，我试图将HTML代码中的id设置为对象js的id，我看了几本教程，我认为它应该可以正确运行，但是我的编译器一直在处理data-id =“ $ {getCandidate.id} “作为字符串值，该代码有什么问题； /

// read all candidates from server
function readData() {
    $.ajax({
        url: apiURLGetAllCandidates
            + 'all'
    })
        .done(candidateList => {
            candidateList.forEach(getCandidate => {
                const $element = $(
                    " <div class=\"candidate-list\">" +
                    " <table class=\"info-table\" id=\"info-table\">\n" +
                    "        <tr>\n" +
                    "            <th>name</th>\n" +
                    "            <th>surname</th>\n" +
                    "            <th>age</th>\n" +
                    "            <th>education</th>\n" +
                    "            <th>experience</th>\n" +
                    "        </tr>\n" +
                    "        <tr class=\"info-row\">\n" +
                    "            <th id=\"name\">" + getCandidate.name + "</th>\n" +
                    "            <th id=\"surname\">" + getCandidate.surname + "</th>\n" +
                    "            <th id=\"age\">" + getCandidate.age + "</th>\n" +
                    "            <th id=\"education\">" + getCandidate.candidateEducation + "</th>\n" +
                    "            <th id=\"experience\">" + getCandidate.experience + "</th>\n" +
                    "        </tr>\n" +
                    " </table>" +
                    "        <button class='edit-button'>Edit</button>" +
                    "        <button class='delete-button' data-id =\"${getCandidate.id}\">Delete candidate</button>\n" + // place where i have problem
                    "        <button class='detail-button'>Show details</button>" +
                    "<table class='details-table' id='details-table'>" +
                    "        <tr>\n" +
                    "            <th>phone number</th>\n" +
                    "            <th colspan='2'>email</th>\n" +
                    "            <th>salary expectations</th>\n" +
                    "            <th>city</th>\n" +
                    "        </tr>\n" +
                    "        <tr class=\"info-row\">\n" +
                    "            <th id =\"phone-number\">" + getCandidate.phoneNumber + "</th>\n" +
                    "            <th colspan='2' id=\"email\">" + getCandidate.email + "</th>\n" +
                    "            <th id=\"salary-expectations\">" + getCandidate.salaryExpecations + "</th>\n" +
                    "            <th id=\"city\">" + getCandidate.city + "</th>\n" +
                    "        </tr>\n" +
                    "        <tr>" +
                    "            <th colspan=\"5\">short description</th>\n" +
                    "        </tr>" +
                    "        <tr>" +
                    "            <th colspan=\"5\" class='info-row'>" + getCandidate.shortDescription + "</th>\n" +
                    "        </tr>" +
                    "    </table>\n " +
                    "</div>"
                );

                $CandidateList.append($element);
            });
        });
}

Answer 1

尝试将其放在单引号内

<button class='delete-button' data-id ='"+${getCandidate.id}+"'>Delete candidate</button>