Question

我学习了如何使用访存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

您要解析的数据为数组类型

[{"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));

这里是working fiddle

Answer 3

第二个AppStopMethodConsole的数据是一个内部带有对象的数组。如果要在对象中获取.then，则需要使用quote选择对象。然后，使用data[0]选择对象中的键.quote。您可以获得所需的价值。

quote

从api提取数据时，为什么会得到未定义的答案？

3 个答案: