title: Adding image files into JSON object and displaying it in HTML?
body: <p>I am a total beginner at coding, and I signed up here just to ask this question. I'm wondering if any of you can point me to the right direction or help me out with this code. First off, my goal is to create an art portfolio that shows my art in a 3x3 format, basically the same format look as Instagram. </p>
  
  <p>So I've done a lot of tinkering the past couple of weeks, working with a mentor and at first, he told me to display my images in a 3x3 format using just JavaScript. After doing that, I've been told to learn more about JSON and how to store images in a JSON object and display it in a 3x3 object exactly like before. At first, it turned out great with JavaScript but then after he told me to change it up by using JSON, my images don't display the same anymore. Now they are stacked on top of each other, vertically, and not 3x3 anymore. I've been comparing code with my old file and the latest one still turns out vertically stacked...</p>
  
  <p>My current JS code: </p>
  
  <pre><code>var data = {
  "images": [{
          "img": "img/balloon.jpg",
          "id": "balloon"
      },
      {
          "img": "img/cate.jpg",
          "id": "cate"
  
      },
      {
          "img": "img/dragon.jpg",
          "id": "dragon"
      },
      {
          "img": "img/Groot.jpg",
          "id": "groot"
      },
      {
          "img": "img/flareon.jpg",
          "id": "flareon"
      },
      {
          "img": "img/forest.jpg",
          "id": "forest"
      },
      {
          "img": "img/fox.jpg",
          "id": "fox"
      },
      {
          "img": "img/glaceon.jpg",
          "id": "glaceon"
      },
      {
          "img": "img/majora.jpg",
          "id": "majora"
      }, 
  ] };
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt; Art Gallery&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  
  
  
  
  
  &lt;/head&gt;
  
  &lt;header&gt;
      &lt;center&gt;
          &lt;div class="banner"&gt;
              &lt;div class="centered-text"&gt; My Art Gallery&lt;/div&gt;
          &lt;/div&gt;
      &lt;/center&gt;
  &lt;/header&gt;
  
  
  
  
  &lt;body&gt;
  
      &lt;script&gt;
          var fs = require('./img');
          var files = fs.readdirSync('./img');
          function myMessage() {
              if (files == null) {
                  return " sorry something went wrong ";
              } else {
                  // print files
              }
          }
      &lt;/script&gt;
  
      &lt;script&gt;
          document.write(myMessage());
      &lt;/script&gt;
  
  
  
      &lt;p&gt;
          &lt;div class="tn-container tn left"&gt;
              &lt;div id="profile-picture"&gt;
                  &lt;script&gt;
                      var myProfile = document.createElement("img");
                      myProfile.setAttribute("src", "img/Me1.jpg");
                      document.getElementById("profile-picture").prepend(myProfile);
                  &lt;/script&gt;
  
              &lt;/div&gt;
  
              &lt;p&gt;
                  &lt;div class="block_1 hline-bottom "&gt;&lt;/div&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/p&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;div class="art" id="images"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
  
  
              &lt;div class=" col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;div class="art" id="images"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=" col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;div class="art" id="images"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;div class="art" id="images"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;div class="art" id="images"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;div class="art" id="images"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;div class="art" id="images"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;div class="art" id="images"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;div class="art" id="images"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/html&gt;
  
  &lt;script type="text/javascript " src="script.js "&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>data.images.forEach(function(obj) {
  var img = new Image();
  img.src = obj.img;
  img.setAttribute("class", "art");
  document.getElementById("images").appendChild(img);
  </code></pre>
  
  <p>As you can see, I've been using containers and rows to make my format 3x3. It was fine before until I started inserting the images into JSON object. Images are showing which is great but now they are vertically stacked. I just want it 3x3 like before :/</p>
  
  <p>This is my first time posting here on Stack Overflow so I apologize in advance if my question isn't clear or if I'm not showing my code correctly. Also I can post up my old files to compare</p>