使用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").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操作:)