How to display plain text in browser, fetching from API-CodePudding

I have tried to use JSON.parse and JSON.stringify, but am not sure how to display plain text with no special characters in the browser, using a button, fetching from an API. Any help or guidance would be appreciated. When the button is clicked I want to fetch from the API a new random joke and display in the browser in plain text.

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>

CodePudding user response：

You just need to access the right value, not stringify the whole object, the joke value is already a string:

result.innerText = jsonResult.value.joke;

CodePudding user response：

If i got it right, you want to only show the joke. In that case you need to check the json structure to access values of intrest. Which in this case is joke that is inside value object. In order to print it on web browser you can use this code.

result.innerText = jsonResult["value"]["joke"]

CodePudding user response：

You need to fix your error first - your element id should be fetchdata, not fetch-data.
Just access the object using normal dot notation. If you look at the response you'll see that there is a value property, and inside that is a joke property, and that's what you need to add to your element text.

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>

CodePudding user response：

this must work

#fetch-data should be #fetchdata;
access the value you need like this - result.innerText = jsonResult.value.joke;