在Javascript變量中訪問JSON對象

Question

我正在使用JSON制作瑣事游戲，但遇到問題。 首先，我可以通過閱讀文檔后從JSON中提取數據，並將其顯示在列表中，如下所示：

$.getJSON('/trivia.json', function(data) {
    var items = [] 
    $.each(data, function (item, i) {
        items.push('<li id="' + i.order + '">' + i.question + ' - ' + i.choices + i.correct +  '</li>');
    });

    $('<ul/>', {
        'class': 'my-new-list',
        html: items.join('')
    }).appendTo('#example');

});

在創建問題和答案列表時效果很好，因此我可以確認我正確地調用了本地JSON文件。

我的下一步是獲取要存儲在我的Javascript變量中的問題和答案數據，以進行測驗。 當我進行示例測驗時，我將數據存儲為：

var quiz = [
    {
        "question" : "Q1: Who came up with the theory of relativity?",
        "choices" : [
                                "Sir Isaac Newton",
                                "Nicolaus Copernicus",
                                "Albert Einstein",
                                "Ralph Waldo Emmerson"
                            ],
        "correct" : "Albert Einstein",
    }]; 

我不希望問題是靜態的，所以我希望JSON接管問題和選擇的提供。

我嘗試為測驗var調用appendTo函數，但是它沒有像創建列表時那樣傳遞數據。 關於如何獲得問題，選擇和正確的數據集以適用於var測驗的任何想法？

Answer 1

您可以更新代碼以將來自Ajax請求的捕獲數據添加到測驗變量中，並遍歷選擇以打印它們，如以下代碼所示：

var quiz = [
    {
        "question" : "Q1: Who came up with the theory of relativity?",
        "choices" : [
                                "Sir Isaac Newton",
                                "Nicolaus Copernicus",
                                "Albert Einstein",
                                "Ralph Waldo Emmerson"
                            ],
        "correct" : "Albert Einstein",
    }];     
$.getJSON('/trivia.json', function(data) {
    var items = [] 
    $.each(data, function (item, i) {
        var q = {"question": i.question, "correct": i.correct, "choices": []};
        var choicesStr = ""; 
        $.each(i.choices, function (it, choice) {
            choicesStr += "<span>choice</span></br>";
            q.choices.push(choice);
        }
        quiz.push(q);
        items.push('<li id="' + i.order + '">' + i.question + ' - ' + choicesStr  + i.correct +  '</li>');

    });

    $('<ul/>', {
        'class': 'my-new-list',
        html: items.join('')
    }).appendTo('#example');

});