title: Getting JSON to display on a page using JavaScript
body: <p><strong>I don't know why the code in the snippet below returns this error within the 'generateSkillData' function:</strong></p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'forEach' of undefined
      at generateSkillData (script.js:54)
      at loadingDone (script.js:45)
      at XMLHttpRequest.request.onload (script.js:24)
  </code></pre>
  
  <p><strong>Rather than displaying the results of skills.json (see below an example of one object):</strong></p>
  
  <pre><code>[
  {
      "skill": "Python",
      "description": "An increasingly popular server-side language"
  }
  ] 
  </code></pre>
  
  <p><strong>I have other code that is very similar and runs fine. I borrowed a lot of the functionality from that code.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getSkillData(errorFunc, successFunc) {
    let request = new XMLHttpRequest();
    request.open("GET", "js/skills.json", true);
    request.onload = function() {
      if (request.status &gt;= 200 &amp;&amp; request.status &lt; 400) {
        console.log("Success! The call worked!");
        const data = request.responseText;
  
        successFunc(data); {
          console.log("Error: no data available");
        }
      };
      request.onerror = function errorFunc() {
        errorFunc();
      };
    };
  
    request.send();
  }
  
  function loadingDone(data) {
    console.log("LOADING DONE");
    skill_box.innerHTML = "";
    const finished_markup = generateSkillData(data);
    const skill_container = document.getElementById("skill_box");
    skill_container.insertAdjacentHTML("beforeend", finished_markup);
  };
  
  
  function generateSkillData(response) {
    let skill_markup = "";
    response.data.forEach(function(thing) {
      skill_markup += formatSkillData(thing);
    });
    return skill_markup;
  }
  
  function formatSkillData(item) {
    const markup = `
          &lt;ul&gt;
              &lt;li&gt;${item.skill}&lt;/li&gt;
              &lt;li&gt;${item.description}&lt;/li&gt;
          &lt;/ul&gt;`;
    return markup;
  }
  
  function loadingError() {
    console.log("Error loading skills: try again later");
    document.body.insertAdjacentHTML("beforeend", "&lt;strong&gt;An error occured, please try again later&lt;/strong&gt;");
  };
  
  
  (function init() {
    getSkillData(loadingError, loadingDone);
  })()</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content=""&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;form id="user_form"&gt;
      &lt;label class="user_input_label" for="link"&gt;Skill name:&lt;/label&gt;
      &lt;input type="text" name="skill" value="" placeholder="Enter a skill..." id="skill"&gt;
      &lt;label class="user_input_label" for="price"&gt;Skill description:&lt;/label&gt;
      &lt;input type="text" name="description" value="" placeholder="Description..." id="description"&gt;
      &lt;input class="submit_button" type="submit" value="Submit"&gt;
    &lt;/form&gt;
  
    &lt;section id="skill_box"&gt;
  
    &lt;/section&gt;
  
  &lt;/body&gt;
  
  &lt;script src="js/script.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>