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)
EDIT: I have updated the code to look as following. It kinda works but the problem is that is have a table for workshops and every row has a list with the students inside and instead of appending students to the right workshop it appends them to the first list other are empty.
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);
});
};
student is an object. When you try to interpolate it into the template literal, it gets turned into the string [Object object], which isn't a meaningful argument to create_modal().
Instead of interpolating, you should create the element using DOM methods, and use addEventListener() with a closure to bind the click listener.
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);
});
//...
});Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments