Блог

Главная - Вопросы по программированию - Как отобразить обычный текст в браузере, извлекаемый из API

Как отобразить обычный текст в браузере, извлекаемый из API

#javascript #json #api

Вопрос:

Я пытался использовать 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>

Комментарии:

1. #fetch-data должно быть #fetchdata

2. Обычный текст обычно должен входить в pre или code блок или текстовую область

Ответ №1:

Вам просто нужно получить доступ к правильному значению, а не к строке всего объекта, значение шутки уже является строкой:

 result.innerText = jsonResult.value.joke;

Ответ №2:

  1. Сначала вам нужно исправить вашу ошибку — ваш идентификатор элемента должен быть fetchdata , а не fetch-data .
  2. Просто получите доступ к объекту, используя обычную точечную нотацию. Если вы посмотрите на ответ, вы увидите, что есть 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 для доступа к значениям intrest. В данном случае это шутка, которая находится внутри объекта value. Для того, чтобы распечатать его в веб-браузере, вы можете использовать этот код.

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

Ответ №4:

это должно работать

  1. #fetch-данные должны быть #fetchdata;
  2. получите доступ к нужному вам значению следующим образом — result.innerText = JsonResult.value.joke;
Метки: ,