javascript - Jquery 命令未执行，看不到我做错了什么

Question

我正在尝试使用 Jquery 通过 API 访问随机报价。我对此很陌生，所以我确信有一个我看不到的简单解决方案。基本上这是我的 HTML 代码:

<div class="col-md-6">
  <button id="quoteClick" type="button" class="btn btn-success btn-lg quoteButton text-center btn-block">Get Quote</button>
</div>


  <div class="row">
    <div class="col-md-2">
    </div>
    <div class="col-md-8 show boxed text-center">
      Text
    </div>
    <div class="col-md-2">
    </div>
  </div>

我的JS是这样的:

$(document).ready(function() {
  $("#quoteClick").on("click", function() {
    $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json) {
      var html = "";

        json.forEach(function(x) {

          html += "<div class = 'quote'>";


          html += "<h3 '" + x.quoteText + "' "+ "'>";

          html += "</div>";

        });

        $(".show").html(html);

      });
    });
  });

当我使用 console.log(json) 时，我可以打印我正在查询的对象，但是当我实际上尝试找出引用并将其打印在我的网页上时，什么也没有发生。我正在使用代码笔。

Answer 1

您不应该迭代从 API 获取的对象。如果您查看单个 API 调用，我得到的结果如下所示:

{
  "quoteText": "To be thoughtful and kind only takes a few seconds compared to the timeless hurt caused by one rude gesture.",
  "quoteAuthor": "Byron Pulsifer",
  "senderName": "",
  "senderLink": "",
  "quoteLink": "http:\/\/forismatic.com\/en\/4255d6ba93\/"
}

您只需删除 forEach 调用，您的代码就会正常工作。

此外(gavgrif 在他们的回答中首先指出了这一点)，您的 HTML 格式错误 - 您应该将文本放在 h3 中。

这应该更好:

$(document).ready(function() {
    $("#quoteClick").click(function() {
        $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json) {
            var html = "";
            html += "<div class = 'quote'>";
            html += "<h3>" + json.quoteText + "</h3>";
            html += "</div>";
            $(".show").html(html);
        });
    });
});