Loop не работает по назначению

Question

http://codepen.io/abdulahhamzic/pen/aNexYj

Я пытаюсь получить эту петлю, чтобы правильно напечатать десять результатов на экране, но кажется, что есть что-то не так с моей петлей, и я не могу понять что это такое. В Mozilla я получаю только первый результат, отображаемый на экране, и кажется, что цикл застревает после первой итерации, а в Chrome я получаю десять результатов, но похоже, что цикл все еще работает после того, как я не могу действительно делайте какие-либо стили для вновь созданных элементов, плюс я до сих пор получаю этот значок загрузки на странице. Может ли кто-нибудь помочь мне в фиксации этого цикла? Вот код:

var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=aa&limit=10&callback=?"; 
$(document).ready(function(){ 
    $.getJSON(url, function(json){ 
    for (var i = 0; i < json[1].length; i++){ 
     document.write("<div><span class='header' style='color:red'>" + json[1][i] + "</span><br>" + json[2][i] + "</div><br>") 
    } 
    }) 
})  

Answer 1

The document.write() function is dangerous и имеет различное поведение над различными браузерами. Лучше не использовать его. Вы можете иметь что-то вроде ниже рабочего кода:

var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=aa&limit=10&callback=?"; 
 
$(document).ready(function(){ 
 
    $.getJSON(url, function(json){ 
 
    for (var i = 0; i < json[1].length; i++){ 
 
     $("body").append("<div><span class='header' style='color:red'>" + json[1][i] + "</span><br>" + json[2][i] + "</div><br>") 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>