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

编程问答 2022-05-17

问题描述

我遇到了一些麻烦。

我需要使用以下 API 创建一个网站，该网站将显示三个随机的 Chuck norris 笑话：http://www.icndb.com/api/。我必须使用以下 URL 来获取笑话：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 显示正确，但在控制台中，即使我调用了一个笑话，也会出现所有三个笑话。请看下面的截图：

enter image description here

预先感谢您的帮助。

解决方法

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

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>

console.logfetch-apihtmljavascript