html - 使用 jQuery 将 JSON 数据显示为 HTML

Question

我想要一种简单的方法来将文本和作者显示到 HTML 中，如下所示:

text: You can observe a lot just by watching
author: Yogi Berra

在这里，我尝试使用 jQuery 来完成它，它在屏幕上返回空白，并且在注销时返回 undefined 除非我从 (data.text) 中删除 text )。

$.ajax({
  url: "https://type.fit/api/quotes",
  method: "GET"
}).then(function(data) {
  $("#text").text(data.text);
  $("#author").text(data.author);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="text"></p>
  <p id="author"></p>
</div>

我在这里错过了什么？

Answer 1

数据为JSON格式，需要解析。它也是一个数组，因此需要选择第二个元素来显示所选文本:

$.ajax({
  url: "https://type.fit/api/quotes",
  method: "GET"
}).then(function(data) {
  data = JSON.parse(data);
  
  $("#text").text(data[1].text);
  $("#author").text(data[1].author);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="text"></p>
  <p id="author"></p>
</div>