API 查克诺里斯笑话未定义答案

【问题标题】：API chuck norris jokes undefinedAPI 查克诺里斯笑话未定义
【发布时间】：2021-08-09 10:44:15
【问题描述】：

我正在尝试调用两个不同的 API。我的想法是，当你点击底部时，屏幕上会随机出现一个笑话。我创建了两个不同的函数来获取两个不同的 API。然后，我用 Math.random() 两个得到一个随机数。如果它是随机的 > 50，则执行一个函数，否则执行另一个。我的问题是来自 Chuck Norris API 的 API 数据总是返回未定义，我正在努力找出错误所在。

这是我的 JS 代码：

const button = document.getElementById("button");
const joke = document.getElementById("joke-content");
const url = " https://icanhazdadjoke.com/";
const urlChuck = "https://api.chucknorris.io/jokes/random";

button.addEventListener("click", getJoke = () => {
    const randomNumber = 100 * Math.random();
    return randomNumber > 50 ? getDadJoke() : getChuckJoke();
}
);

const getDadJoke = () => {
    fetch(url, {
        headers: {
            "Accept": "application/json"
        }
    }).then(response => response.json())
        .then(data => joke.innerHTML = data.joke)
}

const getChuckJoke = () => {
    fetch(urlChuck, {
        headers: {
            "Accept": "application/json"
        }
    }).then(response => response.json())
        .then(data => joke.innerHTML = data.joke)
}

【问题讨论】：

Chuck API 似乎使用value 属性返回笑话，而不是joke 属性。

标签： javascript json api

【解决方案1】：

对于 Chuck Norris 的笑话，您指的是 data.joke，但它应该是 data.value：

const getChuckJoke = () => {
    fetch(urlChuck, {
        headers: {
            "Accept": "application/json"
        }
    }).then(response => response.json())
        .then(data => joke.innerHTML = data.value)
}

【讨论】：