如何在浏览器中显示纯文本，从 API 获取答案

【问题标题】：How to display plain text in browser, fetching from API如何在浏览器中显示纯文本，从 API 获取
【发布时间】：2021-12-25 04:09:18
【问题描述】：

我曾尝试使用 JSON.parse 和 JSON.stringify，但不知道如何使用按钮从 API 获取在浏览器中显示没有特殊字符的纯文本。任何帮助或指导将不胜感激。单击按钮时，我想从 API 中获取一个新的随机笑话并以纯文本形式显示在浏览器中。

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>

【问题讨论】：

#fetch-data 应该是#fetchdata
纯文本通常应该进入pre或code块或文本区域

标签： javascript json api

【解决方案1】：

这必须有效

#fetch-data 应该是#fetchdata；
像这样访问您需要的值 - result.innerText = jsonResult.value.joke;

【讨论】：

【解决方案2】：

您需要先修复错误 - 您的元素 ID 应该是 fetchdata，而不是 fetch-data。
只需使用普通的点符号访问对象。如果you look at the response，您会看到有一个value 属性，其中有一个joke 属性，这就是您需要添加到元素文本的内容。

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>

【讨论】：

【解决方案3】：

如果我没看错，你只想显示笑话。在这种情况下，您需要检查 json 结构以访问兴趣值。在这种情况下，这是价值对象内部的笑话。为了在网络浏览器上打印它，您可以使用此代码。

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

【讨论】：

【解决方案4】：

你只需要访问正确的值，而不是字符串化整个对象，笑话值已经是一个字符串：

result.innerText = jsonResult.value.joke;

【讨论】：