从JSON中获取随机引用并将其附加到div中

Question

我试图随机引用这是在数据。JSON文件，并将其追加到一些div，但我得到错误，无论我把我的变量:

My JS file:

$(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);
});

还有我的数据。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){这里的引号变量传递的是整个JSON文档，其中有另一个quotes键在里面。可以通过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);
    });
});

Answer 2

这是一个HTTP get请求(异步)。试试这个并检查控制台日志。

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

Answer 3

在这种情况下，看起来randomQuote在某些时候被分配了undefined，所以它最终试图运行undefined.quote而不是在对象上访问quote。

randomQuote = quotes[Math.floor(Math.random() * quotes.length)];有问题

我会记录quotes，看看当你得到它时它是否被定义。

Answer 4

getJSON方法是异步的。试试这个:

$(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);
  });    
});

Answer 5

必须在.getJSON回调中显示返回的数据

$(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);
    });
});