title: Display JSON data to HTML page using JavaScript
body: <p>First time being exposed to JSON so please explain like I'm 5 without the jargon.
  I have been given a JSON file like this and need to display these items in a list in HTML.
  A lot of examples have the JSON object assigned to a variable- this isn't assigned to a variable so I'm unsure how to reference it.
  How can I access and display everything in product list.
  In my html I have linked to a script.js file and also this json file.</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;h1&gt;My Cart&lt;/h1&gt;
      &lt;div id="cart"&gt;
          &lt;h2&gt;Cart Items&lt;/h2&gt;
          &lt;ul id="cartItemsList"&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>    "basket": {
          "productList": [{
              "product": {
                  "id": "111",
                  "name": "Dog",
                  "shortDescription": "&lt;p&gt;Mans best friend&lt;/p&gt;",
                  },
                  "category": "Canine",
                  "availability": "In Stock",
                  "variationType": {
                      "name": "Breed",
                      "value": "Collie"
                  }
              },
              "quantity": 1,
              "price": "$53.00"
          }, {
              "product": {
                  "id": "112",
                  "name": "Dog",
                  "shortDescription": "&lt;p&gt;Not so best friend&lt;/p&gt;",
                  "category": "feline",
                  "availability": "Low In Stock",
                  "variationType": {
                      "name": "breed",
                      "value": "Maine Coon"
                  }
              },
              "quantity": 1,
              "price": "$49.00"
          }, {
              "product": {
                  "id": "113",
                  "name": "Rabbit",
                  "shortDescription": "Likes carrots",
                  "category": "cuniculus",
                  "availability": "In Stock"
              },
              "quantity": 1,
              "price": "$66.00"
          }]
      }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>    var products = document.getElementById("cartItemsList");
      cartItemsList.innerHTML = "&lt;li&gt;" + product + "&lt;/li&gt;";
  </code></pre>