I am trying to generate a table dynamically with elements I am getting through a fetch, I get to draw the table with the users, but I would like to add a onclick function to each one of the rows so whenever I click on the row I get the books attached to that user(which are gotten from the database), anyways my question is how can I add a function to each tr each time a tr is generated so when I click on a tr I call a function. I tried to add an eventlistener on the drawUsersTable function to each tr but it does not seem to work.
Here is the code:
<body>
<script>
async function getToken() {
const response = await fetch("http://localhost:3000/auth", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
user: "jesus",
password: "1234"
})
});
const { token } = await response.json(); //esta linea no se ejecutara hasta que response este resuelta
localStorage.setItem("token", token);
}
async function printUsers() {
const token = localStorage.getItem("token");
const response = await fetch("http://localhost:3000/users", {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
}
});
const users = await response.json();
drawUsersTable(users);
}
const drawUsersTable = users => {
cont = 1;
const table = document.getElementById("table");
users.forEach(({ user_id, username, isAdmin }) => {
const firstTD = document.createElement("td");
const secondTD = document.createElement("td");
const thirdTD = document.createElement("td");
firstTD.innerText = user_id;
secondTD.innerText = username;
thirdTD.innerText = isAdmin;
const tr = document.createElement("tr");
tr.setAttribute("id", "user_id" + cont);
tr.addEventListener("click", printBooks(user_id));
cont = cont + 1;
tr.append(firstTD, secondTD, thirdTD);
table.append(tr);
});
};
getToken().then(() => printUsers());
async function printBooks(userId) {
const token = localStorage.getItem("token");
const response = await fetch("http://localhost:3000/bookUser/:userId/books", {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
}
});
const books = await response.json();
console.log(books);
}
</script>
<table id="table">
<tr>
<td class="id">ID</td>
<td>Username</td>
</tr>
</table>
I tried this but it is not working, instead of adding the onclick method to each row, it prints out all the code on the screen.... any hints?
const drawUsersTable = users => {
cont = 1;
const table = document.getElementById("table");
users.forEach(({ user_id, username, isAdmin }) => {
const firstTD = document.createElement("td");
const secondTD = document.createElement("td");
const thirdTD = document.createElement("td");
firstTD.innerText = user_id;
secondTD.innerText = username;
thirdTD.innerText = isAdmin;
const tr = document.createElement("tr");
tr.setAttribute("id", "user_id" + cont);
tr.onclick = function(user_id){
const token = localStorage.getItem("token");
const response = fetch("http://localhost:3000/bookUser/:userId/books", {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
}
});
const books = response.json();
console.log(books);
}
