從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。

回答

相關問題