title: Code is not getting inside the $.getJson method because it's getting a 404
body: <p>Cannot figure out how to actually fix this issue. I have a print line to the console before and after the <code>getJson</code> method and only getting the before.</p>
  
  <p>Here is the error I'm getting on the console:</p>
  
  <p><img src="https://i.imgur.com/2WokHCH.png" alt=""></p>
  
  <p>I have already messed with the path a lot and that doesn't seem to be the issue and I have verified that my JSON is accurate. Here is my JavaScript code</p>
  
  <pre><code>$(document).ready(function () {
      var myList;
      console.log("here");
      $.getJSON('/vegetables.json').done(function (data) {
          console.log("also here");
          myList = data;
          //console.log(myList['vegetables'][0].name);
  
          var uList = document.getElementById("items");
          for (i = 0; i &lt; myList['vegetables'].length; i++) {
  
              var div = document.createElement('div');
              div.setAttribute('class', 'col-sm-3 vegetables');
  
              var name = document.createElement('h3');
              name.innerHTML = myList['vegetables'][i].name;
              div.appendChild(name);
  
              var description = document.createElement('p');
              description.innerHTML = myList['vegetables'][i].description;
              div.appendChild(description);
  
              var price = document.createElement('p');
              price.innerHTML = myList['vegetables'][i].price;
              div.appendChild(price);
  
              var addToCart = document.createElement('button');
              addToCart.setAttribute('value', i);
              addToCart.setAttribute('class', 'btn btn-primary');
              addToCart.innerHTML = "Add to Cart &lt;img src='glyphicons-203-shopping-cart.png' /&gt;";
              addToCart.setAttribute('onClick', 'carrot(this)');
              div.appendChild(addToCart);
  
             /*&lt;div class="col-sm-3 vegetables" &gt;
  
                       &lt;h3 id="div1Name"&gt;&lt;/h3&gt;
                       &lt;p id="div1Description"&gt;Carrots are orange &lt;/p&gt;
                       &lt;p id="div1Price"&gt;&lt;/p&gt;
                       &lt;button onclick="carrot(this)" type="button" class="btn btn-primary" /&gt;Add to Cart &lt;img src="glyphicons-203-shopping-cart.png" /&gt;
                   &lt;/div&gt;*/
  
              //li.appendChild(panel);
              uList.appendChild(div);
          }
      });
      });
  </code></pre>
  
  <p>Head tags for the jQuery</p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;Vegetable&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="main.css"&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>Let me know if anything else will help.</p>