为什么我在从 API 获取数据时得到未定义的答案？

Question

我学习如何使用 fetch API，并尝试打印 Simpsons API 的引用作为练习。问题是答案一直没有定义。你知道为什么它不只是打印报价吗？

let button    = document.querySelector('#button')
let quote      = document.querySelector('#quote')

function getInfoFetch(){

  fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(response => response.json())
    .then((data) => {

      quote.innerText = data.quote;

    })
    .catch(err => console.log(err));
}

button.addEventListener('click', getInfoFetch)

Answer 1

API 的响应似乎是一个数组，这意味着您需要访问数组响应的第一项的报价数据。

您可以通过对代码进行以下更改来做到这一点：

let button = document.querySelector('#button')
let quote = document.querySelector('#quote')

function getInfoFetch(){

  fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(response => response.json())
    .then((data) => {
    
      // Access first item of data "array" to retrieve and display quote
      quote.innerText = data[0].quote;

    })
    .catch(err => console.log(err));
}

button.addEventListener('click', getInfoFetch)

<button id="button">Get quote</button>
<div id="quote"></div>

Answer 2

第二个

.then

的数据是一个数组，里面有一个对象。 如果要获取对象中的

quote

，需要使用

data[0]

选择该对象，然后使用

.quote

选择对象中的关键

quote

。并且可以获得你想要的值。

let button = document.querySelector('#button');
let quote = document.querySelector('#quote');

function getInfoFetch(){
  fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(response => response.json())
    .then((data) => {
      console.log(data); 
      //this is an array with object(index = 0) inside [{...}]
      quote.innerText = data[0].quote;
    })
    .catch(err => console.log(err));
}

button.addEventListener('click', getInfoFetch);

Answer 3

您正在解析的数据是数组类型

[{"quote":"I can't even say the word 'titmouse' without gigggling like a schoolgirl.","character":"Homer Simpson","image":"https://cdn.glitch.com/3c3ffadc-3406-4440-bb95-d40ec8fcde72%2FHomerSimpson.png?1497567511939","characterDirection":"Right"}]

因此要阅读您还需要传递索引

fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(response => response.json())
    .then((data) => {

      quote.innerText = data[0].quote;

    })
    .catch(err => console.log(err));

这是工作小提琴