En este ejercicio práctico vamos a descubrir cómo buscar ayuda para generateCommentSnippet, una función creada que declaramos para cumplir con los objetivos de un programa de código que busca el desarrollo web de una página. En una de las ediciones del Bootcamp de Desarrollo Web queríamos realizar un sitio web con una lista de juegos o un directorio de videojuegos interesantes. Como en este tipo de procesos es habitual que surjan problemas, aquí pedimos ayuda para generateCommentSnippet.
Ayuda para generateCommentSnippet
Un programa de desarrollo web está formado por un montón de funciones de JavaScript, etiquetas y comentarios que le permite crear páginas web atractivas y compactas para su uso. Por eso, podríamos encontrar funciones como generateCommentSnippet, cuyo objetivo principal es el de presentar en pantalla todos o un primer vistazo de todos los comentarios que realizan los usuarios en cada una de las entradas de la lista del directorio de los juegos.
No obstante, hubo un problema con este. A continuación, te lo mostraremos y te contaremos cómo lo hemos solucionado.
Cuál es el problema o error
En primer lugar, al estar desarrollando un programa de código para el desarrollo web, podemos ver que no hemos declarado variables o funciones que necesitamos emplear para terminar de conformar un sitio. En este caso, vemos que no hemos definido o declarado totalmente la función de generateCommentSnippet, por lo que, en el primer vistazo, los comentarios no van a aparecer pintados dentro de la pantalla del sitio web. Así pues, nos encontramos con el siguiente tipo de error de Reference dentro de la consola del sitio web:
Solución en generateCommentSnippet
¿Qué crees que es lo que debes hacer para solucionar este tipo de error? Si aparece que no está definida, lo más usual es que empecemos aprendiendo cómo definir una función y una constante dentro de nuestra porción de código. Así pues, vamos a empezar por definir la constante para obtener los comentarios con la instrucción de getCommentsOfGame, como podemos ver a continuación.
Aquí podemos ver elementos como la inclusión del apiEndPoint.
const getCommentsOfGame = async (gameId) => {
const response = await fetch('${apiEndpoint}/games/${gameId}/comments?_expand=user')
return response.json()
}De esta manera, podremos obtener los snippets de los comentarios para pintarlos en la página del sitio web. No obstante, antes de hacer esto, deberíamos haber establecido la función de generateCommentSnippet, que es el elemento del código al que le debemos pedir ayuda. Este genera el comentario a partir de buscar una respuesta que está definida en HTML.
De la misma forma, tendríamos que tener declarada la función para dibujar los comentarios que hemos generado, y que luego tendremos que obtener con las funciones y constantes que hemos definido en los pasos anteriores. Para tener una idea de cómo caracterizar la función de drawComments para dibujar los comentarios, puedes ver el siguiente extracto de código:
async function drawComments (gameID) {
console.log (gameId)
let comments = await getCommentsOfGame (gameId);
document.getElementById ('comments')
.appendChild (document-createElement ('ul'))
.setAttribute ('id', 'comments-list');
var i = 0;
for (i; i < comments-length; i++) {
document.getElementById ('comments-list')
.appendChild(document-createElement('li')).innerHTML = generateCommentSnippet
}
}De esta manera, habrás tenido que definir la constante de getCommentsOfGame para obtener los comentarios, sin olvidar que deberás haber trabajado en las funciones de drawComments y generateCommentSnippet.
¿Qué sigue ahora?
Ahora, con este ejercicio práctico, sabes cómo pedir ayuda para generateCommentSnippet y cómo hacer que los comentarios que tienen los usuarios de un juego aparezcan en el sitio web.
¿Quieres conocer muchos más procesos? ¡Has llegado al lugar correcto! En nuestro Desarrollo Web Full Stack Bootcamp te vamos a mostrar todo el contenido posible relacionado con esta rama de la programación para que destaques en el mercado laboral en muy poco tiempo. ¡Anímate a convertirte en un experto y entra para solicitar ya mismo más información!
