从 API 中获取数据 - 控制台重复

Question

我有点麻烦。

我需要创建一个网站，使用以下 API 显示三个随机的 Chuck Norris 笑话：http://www.icndb.com/api/. I have to use the following URL to fetch the jokes: http://api.icndb.com/jokes/random/3。

我的HTML如下：

<!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>Chuck Norris Jokes</title>
    <link rel="stylesheet" href="css/main.css" type="text/css">
</head>

<body>
    <!-- Added a navigation bar to display logo. -->
    <nav class="navigation-bar">
        <img src="images/Logo.png" alt=Logo id="logo" />
    </nav>
    <!-- Created a container so I can set the grid sections. -->
    <div id="container">
        <!-- First container for the heading and the image. -->
        <div>
            <h1>Chuck Norris Jokes</h1>
            <img src="images/chuck.png" alt="Chuck Norris Armed" id="chuckshoot">
        </div>
        <!-- Second section for the text and for the button. -->
        <div id="jokegen">
            <div id="jokeTxt">
            <p id="j1"></p>
            <p id="j2"></p>
            <p id="j3"></p>
        </div>
            <button id="jokeBtn" value="fetch">Click Here For A Chuckle!</button>
        </div>
    </div>

    <script type="text/javascript" src="js/main.js"></script>
</body>

</html>

我的Javascript如下：

// Created an array for the Chuck Norris jokes.
let joke = [];
// Attached an event handler to the button.
document.getElementById('jokeBtn').addEventListener('click', function () {
    // Fetching the API.
    fetch("http://api.icndb.com/jokes/random/3")
        // Grabbing the information from the JSON file.
        .then(res => res.json())
        // Fetching the joke from value in JSON.
        .then(function (result) {
            for (let i = 0; i < result.value.length; i++) {
            jokes = result.value[0].joke;
            jokes2 = result.value[1].joke;
            jokes3 = result.value[2].joke;

            console.log(jokes);
            console.log(jokes2);
            console.log(jokes3);
            console.log(typeof joke);
            // Displaying the fetched jokes in HTML.
            document.getElementById("j1").innerHTML = jokes;
            document.getElementById("j2").innerHTML = jokes2;
            document.getElementById("j3").innerHTML = jokes3;
            }
        }),
        // If the above could not be executed and an error should occur.
        error => {
            console.log(error + "");
        };
})

HTML 显示正确，但在控制台中所有三个笑话都会出现，即使我调用一个笑话也是如此。请看下面的截图：

提前感谢您的帮助。

Answer 1

您可以稍微简化 Javascript 并在响应中的 value 属性上使用 forEach 循环。

error => {console.log(error + "")} 部分不太正确 - 应该在 catch 部分 - 即 .catch( err=>console.log(err) ) 或类似的

document.getElementById( 'jokeBtn' ).addEventListener('click', ()=>{
  fetch( 'https://api.icndb.com/jokes/random/3' )
    .then( res => res.json() )
    .then( json => {
      if( json.type=='success' ){
        json.value.forEach( ( obj, i )=>{
          let node=document.getElementById( 'j' + ( i + 1 ) );
          if( node )node.innerHTML=obj.joke;
        })
      }
    })
})

<nav class="navigation-bar">
  <img src="images/Logo.png" alt=Logo id="logo" />
</nav>
<div id="container">
  <div>
    <h1>Chuck Norris Jokes</h1>
    <img src="images/chuck.png" alt="Chuck Norris Armed" id="chuckshoot">
  </div>
  <div id="jokegen">
    <div id="jokeTxt">
      <p id="j1"></p>
      <p id="j2"></p>
      <p id="j3"></p>
    </div>
    <button id="jokeBtn" value="fetch">Click Here For A Chuckle!</button>
  </div>
</div>

从 API 中获取数据 - 控制台重复

Fetching data from an API - Console Repeats

html

javascript

console.log

fetch-api