Intenté usar JSON.parse y JSON.stringify, pero no estoy seguro de cómo mostrar texto sin formato sin caracteres especiales en el navegador, usando un botón, obteniendo de una API. Cualquier ayuda o guía sería apreciada. Cuando se hace clic en el botón, quiero obtener de la API una nueva broma aleatoria y mostrarla en el navegador en texto sin formato.
const fetchDataBtn = document.querySelector("#fetch-data"); const result = document.querySelector("#result"); // gets data from API and sets the content of #result div async function getData() { result.innerText = "Loading...."; try { const res = await fetch("http://api.icndb.com/jokes/random"); const jsonResult = await res.json(); result.innerText = JSON.stringify(jsonResult, null, 2); } catch (error) { console.log(error); } } // add event listener for #fetch-data button fetchDataBtn.addEventListener("click", getData); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ChuckNorrisJokes</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="landing"> <div class="title"> <h1>Chuck Norris Jokes</h1> </div> <button id="fetchdata">Get More Jokes</button> <div id="result"></div> </div> <script src="script.js"></script> </body> </html>Solo necesita acceder al valor correcto, no clasificar todo el objeto, el valor de broma ya es una cadena:
result.innerText = jsonResult.value.joke;Si lo hice bien, solo quieres mostrar el chiste. En ese caso, debe verificar la estructura json para acceder a los valores de interés. Que en este caso es una broma que está dentro del objeto de valor. Para imprimirlo en el navegador web, puede usar este código.
result.innerText = jsonResult["value"]["joke"]
Primero debe corregir su error: la identificación de su elemento debe ser fetchdata , no fetch-data .
Simplemente acceda al objeto usando la notación de puntos normal. Si observa la respuesta , verá que hay una propiedad de value , y dentro de eso hay una propiedad de joke , y eso es lo que necesita agregar al texto de su elemento.
const fetchDataBtn = document.querySelector("#fetchdata"); const result = document.querySelector("#result"); // gets data from API and sets the content of #result div async function getData() { result.innerText = "Loading...."; try { const res = await fetch("http://api.icndb.com/jokes/random"); const jsonResult = await res.json(); result.textContent = jsonResult.value.joke; } catch (error) { console.log(error); } } // add event listener for #fetch-data button fetchDataBtn.addEventListener("click", getData); <div class="landing"> <div class="title"> <h1>Chuck Norris Jokes</h1> </div> <button id="fetchdata">Get More Jokes</button> <div id="result"></div> </div>