我試圖弄清楚為什么我不能將陣列物件從映射函式作為引數傳遞給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 >
<a data-bs-toggle="modal" data-bs-target="#studentModal" type="button" onclick="createModal(${student})">${student.first_name} ${student.last_name}</a>
</li>`
).join("")}
...
});
我已經看到了這個（和這個）問題，并嘗試按以下方式更改代碼，但它也不起作用：
...
${workshop.students.map(function(student) {
var studentCopy = JSON.parse(JSON.stringify(student));
return `<li >
<a data-bs-toggle="modal" data-bs-target="#studentModal" type="button" onclick="createModal(${studentCopy})">${student.first_name} ${student.last_name}</a>
</li>`
}).join("")}
...
不幸的是，我不知道確切的錯誤，因為我在 Chrome 中的檢查中看到的唯一內容就是這個。這是索引檔案的開頭，對我沒有幫助。
未捕獲的 SyntaxError：意外的識別符號（在（索引）：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 >
<ul >
${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);
});
};
uj5u.com熱心網友回復：
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);
});
//...
});轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/495564.html
標籤：javascript 数组 字典 复制 深拷贝
上一篇：從字典創建資料框的最佳方法是什么，其中字典鍵是元組：（索引，列）？
下一篇：遍歷字典以檢查重復項