I am trying to figure out why I cannot pass array object from map function as argument to function createModal(student)
that is called onclick:
The error is caused by the parameter because when I tried function createModal()
it worked fine.
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("")}
...
});
I have seen this (and this) question and tried changing the code as following but it did not work either:
...
${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("")}
...
Unfortunately I don’t know the exact error because the only thing I see in inspect in Chrome is this. Which is at the beggining of index file and does not help me.
Uncaught SyntaxError: Unexpected identifier (at (index):1:21)