Sigo recibiendo el error de sintaxis "No detectado (en promesa) ReferenceError: showQuestion no está definido" Tratando de encontrar formas de solucionar este problema. Además, todavía soy nuevo en todo esto.
fetch( 'https://jservice.kenzie.academy/api/random-clue?valid=true' ) .then(response => response.json()) .then(randomDataId => { const categoryDataId = randomDataId.categoryId; console.log(`category id is: ${categoryDataId}`); fetch( `https://jservice.kenzie.academy/api/clues?category=${categoryDataId}` ) .then(response => response.json()) .then(randomCatyId => { const rightAnswer = randomCatyId.clues[randomData].answer; const showTitle = randomCatyId.clues[randomData].category.title; const showQuestion = randomCatyId.clues[randomData].question; showCategory.innerText = `Category: ${showTitle}`; h2Question.innerText = `Question: ${showQuestion}`; console.log('question: ' + showQuestion); console.log('answer: ' + rightAnswer); questionFetch(); }); }); function questionFetch() { h2Question.innerHTML = `Question: ${showQuestion}`; }fetch api es de naturaleza asíncrona, y está intentando leer los datos 'showQuestion' que aún no están disponibles. por favor vea el siguiente código. use async-await, es una forma mucho mejor de jugar con fetch api.
const randomData = 2; // fake Data async function GetDataFromApi(url) { const response = await fetch(url); return await response.json(); } async function RunApp(params) { const randomDataId = await GetDataFromApi('https://jservice.kenzie.academy/api/random-clue?valid=true'); const categoryDataId = randomDataId.categoryId; console.log(`category id is: ${categoryDataId}`); const randomCatyId = await GetDataFromApi(`https://jservice.kenzie.academy/api/clues?category=${categoryDataId}`); const rightAnswer = randomCatyId.clues[randomData].answer; const showTitle = randomCatyId.clues[randomData].category.title; const showQuestion = randomCatyId.clues[randomData].question; // showCategory.innerText = `Category: ${showTitle}`; // h2Question.innerText = `Question: ${showQuestion}`; console.log('question: ' + showQuestion); console.log('answer: ' + rightAnswer); questionFetch(showQuestion); } function questionFetch(showQuestion) { //h2Question.innerHTML = `Question: ${showQuestion}`; } RunApp();La función questionFetch() no tiene acceso a la constante showQuestion . Esto se debe a que esta constante se define en la solicitud de recuperación. La función showQuestion no tiene acceso a los datos definidos dentro de otra función. (más información sobre 'alcance' aquí: https://www.w3schools.com/js/js_scope.asp )
Para solucionar esto, debe proporcionar la constante showQuestion como argumento al llamar a la función questionFetch:
questionFetch(showQuestion); //we supply the constant to the function }); }); /** * function takes an argument, calls it x, and applies it as x. * The name of the argument does not matter, 'x' just the label * this function uses to hold the data supplied * (in our case, the question string); * */ function questionFetch(x) { h2Question.innerHTML = `Question: ${x}`; }Asegúrese de definir y proporcionar el argumento [ datos aleatorios ] utilizado en la segunda función de búsqueda, ya que actualmente no está definido.