title: if statement when so much is loaded, it begins a new row
body: <p>So I need to make an if statement that, whenever id 0 to 3 (4 images) are loaded, make a new row of 0 to 3 images, this same do i need to do with words (probably works the same)</p>
  
  <p>I'm quite new with if statements etc. I just don't know where to start with this..
  The images and words load from a JSON file, and I already have the first bit of codes.</p>
  
  <p>Like the <code>var html = '&lt;div class="row"&gt;';</code> to the <code>html += '&lt;/div&gt;';</code>
  I need an if statement to let the images load in a row of 4 images/words nexto eachother.
  And then make a new row, automaticly.</p>
  
  <p>I guess it sounds complicated.. I hope someone can help me.</p>
  
  <p>JSON,</p>
  
  <pre><code>{"main_object": {
      "imagesJ": ["beak", "cat", "egg", "meel", "milk", "passport", "spoon", "thee"],
      "wordsJ": ["næb", "kat", "æg", "mel", "mælk", "pas", "ske", "te"]
  }
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var jsonData = "noJson";
  var hr = new XMLHttpRequest();
  
  $(document).ready(function(){
  var jsonData = 'empty';
    $.ajax({
      async: false,
      url: "./js/data.json",
      dataType: 'html',
        success: function(response){
          jsonData = JSON.parse(response);
  
          console.log('ok');
            var imagesJ = jsonData.main_object.imagesJ;
            var wordsJ = jsonData.main_object.wordsJ;
            var html = '&lt;div class="row"&gt;';
            var html2 = '';
  
            for(i = 0; i &lt; imagesJ.length; i++) {
  //html += '&lt;/div&gt;&lt;div class="row"&gt;';
  //if statement that whenthere are 0-3 = 4 pictures it begins a new block of code wich makes 0-3 = 4 pictures, that are in bootstrap row PROBEER DIT ALLEEN MET STACKOVERFLOW OF ANDERE INTERNET DINGEN
              html += '&lt;div class="col-md-2"&gt;&lt;img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'"&gt;&lt;/div&gt;';
            }
            html += '&lt;/div&gt;';
  
            document.getElementById('images').innerHTML = html;
  
            for (i = 0; i &lt; wordsJ.length; i++) {
              html2 += '&lt;p&gt;'+wordsJ[i]+'&lt;/p&gt;';
            }
            document.getElementById('words').innerHTML = html2;
  
        },
        error: function(){
          console.log('JSON could not be loaded.');
        }
      });
  
          console.log(jsonData);
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
    position: relative;
    height: 20%;
    /*border-bottom: thick solid grey;*/
  }
  
  body {
    background-color: #f0f0f0;
  }
  .container {
    position: relative;
    height: 50%;
  }
  .images img {
    position: relative;
    height: 100px;
    width: 100px;
  }
  #img4, #img5, #img6, #img7 {
    top: 5%;
  }
  
  footer {
    position: relative;
    height: 5%;
    /*border-top: thick solid grey;*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Sleepopdracht&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
        &lt;link rel="stylesheet" href="css/css.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header&gt;
  
    &lt;/header&gt;
  
      &lt;div class="container" id="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            &lt;img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'"&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            a
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            a
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            a
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            a
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            a
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            a
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            a
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="images" id="images"&gt;&lt;/div&gt;
                                            &lt;div class="words" id="words"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;footer&gt;
    &lt;/footer&gt;
      &lt;script type="text/javascript" src="js/javascript.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see in HTML I have made those rows, they need to become one and loop themselfes a little like <code>&lt;div class="col-md-2"&gt;
            &lt;img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'"&gt;
          &lt;/div&gt;</code></p>
  
  <p><a href="http://prntscr.com/alx1pk" rel="nofollow">This is my result right now.</a></p>
  
  <p><a href="http://prntscr.com/alx28s" rel="nofollow">And this is what it needs to resemble closely.</a></p>