http://codepen.io/abdulahhamzic/pen/aNexYj
I have been attempting to implement a loop to display ten results on the screen, but it appears that there is an issue with my loop that I am unable to identify. In Mozilla, only one result is being shown on the screen and it seems that the loop stops after the first iteration. On Chrome, I do see all ten results but it seems like the loop continues to run as I cannot style the newly created elements, and I also notice a loading icon on the page. Can anyone guide me in fixing this loop? Below is the code snippet:
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>")
}
})
})