¡Estoy enfrentando algunos problemas al intentar pasar el objeto JSON como un parámetro para funcionar! pero en esa función, mientras consuelo, registro los datos que obtengo [objeto: objeto].
Aquí está mi código:
function buildTable(data) { var table = document.getElementById("myTable"); table.innerHTML = ""; for (var i = 0; i < data.length; i++) { var row = `<tr class="item-id-${data[i].id}"> <td>${data[i].name}</td> <td>${data[i].audio_muted}</td> <td>${data[i].video_muted}</td> <td><button id="audio_handle" class="btn btn-primary" onclick="handleMembers('${data[i]}')">Video</button></td>`; table.innerHTML += row; } } function handleMembers(data) { console.log("data = >", data); //= [object:object] }El problema es cuando llamo a la función de manejo desde el botón dentro de la cadena literal de la plantilla. Obtengo [objeto: objeto] como salida
¿Dónde me estoy equivocando?
Arreglé algunos puntos en el siguiente fragmento y agregué algo de HTML y algunos datos de muestra:
// some sample data for illustration: const data=[{id:1,name:"Harry",audio_muted:1,video_muted:1},{id:2,name:"Ron",audio_muted:1,video_muted:0},{id:3,name:"Hermiony",audio_muted:0,video_muted:1},{id:4,name:"Ginny",audio_muted:0,video_muted:1}]; const tbl=document.getElementById("myTable"); tbl.innerHTML = data.map((itm,i)=>`<tr class="item-id-${itm.id}"> <td>${itm.name}</td> <td>${itm.audio_muted}</td> <td>${itm.video_muted}</td> <td><button data-id="${i}" class="btn btn-primary">Video</button></td>`).join("\n") tbl.addEventListener("click",ev=>{ if (ev.target.tagName==="BUTTON") console.log("data = >", data[ev.target.dataset.id]) ; //= [object:object] }) <table id="myTable"></table> Como @Quentin ya mencionó, no debe incluir código JavaScript dentro de una cadena de plantilla. Esto se vuelve demasiado complicado de leer y mantener. En su lugar, utilicé un controlador de eventos delegado en la tabla misma para escuchar el clic en los elementos del button . Al hacer todo esto, ya no había necesidad de las dos funciones nombradas.
Otra cosa que me viene a la mente es: nunca use element.innerHTML += ... dentro de un bucle for ya que esto podría volverse muy lento. Por lo general, es mejor ensamblar toda la cadena HTML de una sola vez y luego asignarla a la propiedad innerHTML .
Creo que es el enfoque equivocado para hacer eso. Debe intentar crear el elemento usando la API DOM y agregar eventListener al elemento seleccionado, algo como:
function buildTable(data) { const table = document.getElementById("myTable"); for(let d of data) { const tr = document.createElement("tr"); const td1 = document.createElement("td"); td1.textContent = d.name; const td2 = document.createElement("td"); td2.textContext = d.audio_muted; const td3 = document.createElement("td"); td3.textContent = d.video_muted; const tdButton = document.createElement("button"); tdButton.classList.add("btn", "btn-primary"); tdButton.addEventListener("click", () => handleMembers(d)); tr.appendChild(td1) tr.appendChild(td2) tr.appendChild(td3) tr.appendChild(tdButton); table.appendChild(tr) } }