无法将数组对象从映射函数传递为参数JavaScript

Question

我试图弄清为什么我不能将数组对象从映射函数作为参数传递到函数createModal（student）被称为onClick：
该错误是由参数引起的，因为当我尝试函数createModal（）时，它效果很好。

const allWorkshops = await fetch("/api/workshops/detail");
const data = await allWorkshops.json();
result.innerHTML = "";
counter = 0;

data.forEach((workshop) => {
  ...
  ${workshop.students.map(student =>
     `<li class="list-group-item">
        <a data-bs-toggle="modal" data-bs-target="#studentModal" type="button" onclick="createModal(${student})">${student.first_name} ${student.last_name}</a>
      </li>`
  ).join("")}
  ...
});

我已经看过 this /Question/122102/What-Is-the-the-the-the-the-way-to-clone-an-ar-object-in-javascript“> this ）问题，并尝试更改代码，但没有以下内容也可以工作：

...
${workshop.students.map(function(student) {
   var studentCopy = JSON.parse(JSON.stringify(student));
   return `<li class="list-group-item">
             <a data-bs-toggle="modal" data-bs-target="#studentModal" type="button" onclick="createModal(${studentCopy})">${student.first_name} ${student.last_name}</a>
           </li>`
}).join("")}
...

不幸的是，我不知道确切的错误，因为我在Chrome中唯一看到的是此错误。这是在索引文件的开始，对我无济于事。

uckulting语法：意外的标识符（在（索引）：1：21）

编辑： 我已经更新了代码以显示以下内容。它有点有效，但问题是有一个用于研讨会的表，每个行都有一个带有学生的列表，而不是将学生附加到正确的研讨会上，而是将它们附加到第一个列表中，而另一个是空的。

const workshopList = document.querySelector(".workshop-list");

async function getData(){
  const allWorkshops = await fetch("/api/workshops/detail");
  const data = await allWorkshops.json();
  data.forEach((workshop) => {
      var studentList = document.querySelector(".student-list");
      const tr = document.createElement("tr");
      tr.classList.add("responsive-table__row");
      tr.innerHTML = `
          <td class="responsive-table__body__text responsive-table__body__text--name">
              <ul class="list-group student-list">
                  ${workshop.students.forEach(student => {
                      let li = document.createElement('li');
                      li.classList.add('list-group-item');
                      let anchor = document.createElement('a');
                      anchor.dataset.bsToggle = 'modal';
                      anchor.dataset.bsTarget = '#studentModal';
                      anchor.setAttribute('type', 'button');
                      anchor.addEventListener('click', () => createModal(student));
                      anchor.innerText = student.last_name;
                      li.appendChild(anchor);
                      studentList.appendChild(li);
                  })}
              </ul>
          </td>
      `
      workshopList.appendChild(tr);
  });
};

Answer 1

Student是一个对象。当您尝试将其插入模板文字中时，它将变成字符串[Object Object]，这不是对create_modal（）的有意义的参数。

您应该使用DOM方法创建元素，而不是插值，并使用addeventListener（）使用闭合来绑定单击侦听器。

data.forEach((workshop) => {
  //...
  workshop.students.forEach(student => {
    let li = document.createElement('li');
    li.classList.add('list-group-item');
    let anchor = document.createElement('a');
    anchor.dataset.bsToggle = 'modal';
    anchor.dataset.bsTarget = '#studentModal';
    anchor.setAttribute('type', 'button');
    anchor.addEventListener('click', () => createModal(student));
    anchor.innerText = student.last_name;
    li.appendChild(anchor);
    studentList.appendChild(li);
  });
  //...
});