javascript - 从 JSON 获取随机引用并将其附加到 div。

Question

我正在尝试随机引用 data.JSON 文件中的内容并将其附加到某个 div，但无论我将变量放在哪里，我都会收到错误:

我的JS文件:

$(specBut).click(function() {
    var randomQuote;
    $.getJSON('data.json',function(quotes){
        randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
    });
    $('.quote').empty().append(randomQuote.quote);
    $('.quote-author').empty().append(randomQuote.author);
});

还有我的 data.JSON 文件:

{
  "quotes":
  [{
    "author": "First author",
    "quote": "First"
  }, {
    "author": "Second author",
    "quote": "Second"
  }, {
    "author": "Third author",
    "quote": "Third"
  }, {
    "author": "Last author",
    "quote": "last one"
  }]
}

我收到此错误:

Uncaught TypeError: Cannot read property 'quote' of undefined

这就是我的 HTML 的样子:

<div class="quote-box">
    <div class="head text-center"><h2>Random Quotes!</h2></div>
    <div class="quote"> </div>
    <div class="quote-author"></div>
    <div class="buttons">
       <a class="btn btn-default" id="specBut" href="#" role="button">New RQ</a>
    </div>
</div>

Answer 1

问题是$.getJSON('data.json',function(quotes){这里传递的 quotes 变量是整个 JSON 文档，其中还有另一个 quotes key 在里面。您可以通过quotes.quotes访问它。此外，由于 get 方法是异步的，因此您需要在回调内执行所有操作。所以应该是这样的

$(specBut).click(function() {
    var randomQuote;
    $.getJSON('data.json',function(quotes){
        randomQuote = quotes.quotes[Math.floor(Math.random() * quotes.quotes.length)];
        $('.quote').empty().append(randomQuote.quote);
        $('.quote-author').empty().append(randomQuote.author);
    });

});