从JSON获取随机引号并将其附加到div。

我想随机引用这是data.JSON文件并将其追加到一些DIV的，但我得到的错误无论身在何处，我把我的变量：从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>

来源

2016-09-24 Marcin Zalewski

我认为你应该使用'quotes.quotes' – Mohammad

'quotes'在回调中的值是什么？ – eavidan

这是正确的，它适用于我，因为当我打印console.log（引号）;我得到“对象{引用：数组[4]}”，所以我的数组被包装在对象中，我需要quotes.quotes使其正确。谢谢！ –

内部的数据的问题是$.getJSON('data.json',function(quotes){这里报价变量传递是整个JSON文档具有里面另一个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); 
    }); 

});

来源

2016-09-24 18:05:33

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

有一个与randomQuote = quotes[Math.floor(Math.random() * quotes.length)];

某一个问题，我会登录quotes看看，当你得到它它甚至定义。

来源

2016-09-24 17:56:43

getJSON方法是asynchronouse。试试这个：

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

来源

2016-09-24 17:57:36

这是一个HTTP请求（异步）。试试这个并检查控制台日志。

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

来源

2016-09-24 17:57:37

'quotes.length'应该是'data.quotes.length' –

对，我会做出改变。谢谢 –

，您必须出示回到.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); 
    }); 
});

来源

2016-09-24 17:58:11 WaldemarIce

从JSON获取随机引号并将其附加到div。

回答

相关问题