使用getJSON从JSON获取所有项目

Question

I try to get the question from a JSON file with getJSON function. I don't know why, but I get on the screen only first question from the JSON file. Where am I wrong?

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

You're overwriting the contents of <div id="json-data"></div> with each iteration by using $("#json-data").html(insertField); . You can either use $("#json-data").append(insertField); or for better performance create a string and then use $.html() once after the loop completes:

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

This method results in only one DOM manipulation :)