Loop does not work as intended

Question

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

I'm trying to get this loop to correctly print out ten results on the screen, but it seems like there is something wrong with my loop and I can't figure out what that is. On Mozilla, I only get the first result displayed on the screen and it seems like the loop is stuck after the first iteration, and on Chrome I get the ten results, but it looks like the loop is still running afterwards since I can't really do any styling on the newly created elements, plus I still get that loading icon on the page. Can anyone help me in fixing this loop? Here's the code:

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>")
    }
  })
})

I don't think you should be using `document.write()` for this. — Serlite, May 24 '16 at 18:57
`document.write` clears the document if executed asynchronously, like in this jQuery event handler `.ready()` and/or `getJSON()`.. — trincot, May 24 '16 at 19:01
Okay, thanks guys! What's with the downvotes though? haha I know I'm asking some pretty basic stuff, I might even sound stupid, but that's how you learn, right? By asking everything you want to ask, no matter how stupid the question may be :) — Abdullah Hamzic, May 24 '16 at 19:04

score 3 · Accepted Answer · edited May 23 '17 at 12:15

The document.write() function is dangerous and has different behaviour over different browsers. Better not use it. You can have something like the below working code:

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>

Loop does not work as intended

1 Answers1