0
265
Vistasno se pueden recuperar los datos debido al valor 'indefinido'
En mi sitio web, incluyo películas y series de televisión en las que los usuarios pueden compartir sus comentarios sobre ellas. Los usuarios pueden agregar comentarios, pero cuando se trata de recibir comentarios, se devuelve un valor indefinido. (Estoy tratando de obtener comentarios de movieComment. movieComment almacena comentarios para la película)
var show = qs["movieId"]; /* show variable is giving my movie's ID and it is 1 */ btnComment.addEventListener('click', (e) => { var movieComment = document.getElementById('textComment').value; push(child(firebaseRef, 'Movies/' + show + '/movieComment/'), movieComment) { movieComment: movieComment }; }); function AddItemsToTable2(comment) { const comments = ` <td>Alan Smith</td> <td><i class="fa fa-star" style="color:rgb(91, 186, 7)"></i></td> <td>${comment}<h6>[May 09, 2016]</h6></td> `; html = comments; body2.innerHTML += html; } } function AddAllItemsToTable2(TheComments) { body2.innerHTML = ""; TheComments.forEach(element => { AddItemsToTable2(element.movieComment); }); } function getAllDataOnce2() { var show = qs["movieId"]; get(child(firebaseRef, 'Movies/' + show + '/movieComment')).then((snapshot) => { var comments = []; comments.push(snapshot.val()); console.log(comments); AddAllItemsToTable2(comments); }); } window.onload = (event) => { getAllDataOnce2(); }; 
Console.log(películas)
Error indefinido:
1 Respuestas
Responde la pregunta0
Centrándonos en esta función:
function AddAllItemsToTable2(TheComments) { body2.innerHTML = ""; TheComments.forEach(element => { AddItemsToTable2(element.movieComment); }); } El objeto TheComments aquí es un Record<string, string>[] :
TheComments = [{ "-Mstwhft8fKP6-M2MRIk": "comment", "-Mstwj5P2TD_stgvZL8V": "a comment", "-MstwjxvmkNAvWFaIejp": "another comment" }] Cuando itera sobre esta matriz, termina con un objeto de elemento que no tiene una propiedad movieComment , por lo que cuando lo alimenta a AddItemsToTable2 obtiene undefined .
Para solucionar esto, debe cambiar la forma en que ensambla el objeto TheComments :
function AddAllItemsToTable2(TheComments) { // TheComments: ({id: string, text: string})[] body2.innerHTML = ""; TheComments.forEach(commentObj => AddItemsToTable2(commentObj.text)); } function getAllDataOnce2() { const show = qs["movieId"]; get(child(firebaseRef, 'Movies/' + show + '/movieComment')) .then((snapshot) => { const comments = []; snapshot.forEach(childSnapshot => { comments.push({ id: childSnapshot.key, // store this for linking to database/anchors text: childSnapshot.val() }); }); console.log(comments); AddAllItemsToTable2(comments); }); } Como otro punto, tenga cuidado con los riesgos de XSS al usar innerHTML y use innerText siempre que sea posible para cualquier contenido generado por el usuario. Además, debe envolver el contenido de su comentario en una fila de la tabla para que los comentarios se concatenen correctamente.
function AddItemsToTable2(commentObj) { const commentEle = document.createElement('span'); commentEle.id = `comment_${commentObj.id}`; commentEle.innerText = commentObj.text; const commentRowHTML = ` <tr> <td>Alan Smith</td> <td><i class="fa fa-star" style="color:rgb(91, 186, 7)"></i></td> <td>${commentEle.outerHTML}<h6>[May 09, 2016]</h6></td> </tr>`; body2.innerHTML += commentRowHTML; } function AddAllItemsToTable2(TheComments) { body2.innerHTML = ""; TheComments.forEach(commentObj => AddItemsToTable2(commentObj)); } Con el bloque de código anterior, ahora puede agregar #comment_-MstwjxvmkNAvWFaIejp al final de la URL de la página actual para vincular al comentario "otro comentario" directamente de forma similar a como StackOverflow vincula a los comentarios.