使用getJSON從JSON獲取所有項目

Question

我嘗試使用getJSON函數從JSON文件中獲取問題。 我不知道為什么，但是我只從屏幕上看到了JSON文件中的第一個問題。 我哪里錯了？

JS：

$.getJSON('data.json', function(data) {
    console.log(data);
    $.each(data, function(index, obj) {
        var insertField = '<ul>';
        insertField += '<li>' + obj.question + '</li>';
        insertField += '</li>';
        $("#json-data").html(insertField);
    });
});

HTML：

<div id="json-data"></div>

JSON：

[
    {
        "question" : "Va este permisa trecerea peste marcajul longitudinal din imagine?",
        "image" : "images/categoria-b/1.jpg",
        "answers" : [
            {"id" : 0, "text" : "A. Da, deoarece linia discontinua este cea mai apropiata de vehiculul pe care il conduceti;" },
            {"id" : 1, "text" : "B. Nu, deoarece este un marcaj dublu;" },
            {"id" : 2, "text" : "C. Nu, deoarece in acest caz depasirea este interzisa." }
        ],
        "correct" : 0
    },
    {
        "question" : "Care vehicule nu au prioritate de trecere?",
        "answers"  : [
            {"id" : 0, "text" : "A. Vehiculele care executa virajul spre dreapta, fata de cele care circula in sens opus;" },
            {"id" : 1, "text" : "B. Vehiculele care coboare fata de cele care urca, daca in sensul de mers al celor care urca se afla un obstacol imobil;" },
            {"id" : 2, "text" : "C. Vehiculele care se pun in miscare la culoarea verde a semaforului." }
        ],
        "correct"  : 1 
    }
]

Answer 1

您每次使用$("#json-data").html(insertField);覆蓋<div id="json-data"></div> $("#json-data").html(insertField); 。 您可以使用$("#json-data").append(insertField); 為了獲得更好的性能，請創建一個字符串，然后在循環完成后使用$.html()一次：

$.getJSON('data.json', function(data) {
    console.log(data);
    var htmlString = '';
    $.each(data, function(index, obj) {
        htmlString += '<ul>';
        htmlString += '<li>' + obj.question + '</li>';
        htmlString += '</ul>';
    });
    $("#json-data").html(htmlString);
});

此方法僅導致一種DOM操作:)