title: Pass JSON object to table with Javascript, at a loss
body: <p>I am trying to pass a json array object from my server to my page as a Table for a homework assignment. I can't get the loop to work.</p>
  
  <p>I tried a loop that created a bunch of empty tables in the console. Something is definitely wrong.
  the JSON array is: </p>
  
  <pre><code>{
      "degrees":[
          {
              "degree":{
                  "School": "Dutchess Community College",
                  "Program": "Humanities",
                  "Type": "Associate of Arts",
                  "Year": "2009"
              }
          },
          {
              "degree":{
                  "School": "Binghamton University",
                  "Program": "English Literature",
                  "Type": "Bachelor of Arts",
                  "Year": "2011"
  </code></pre>
  
  <p>ETC.</p>
  
  <p>The desired output is a simple table, so:</p>
  
  <pre><code>       School    |     Program      |    Type                |Year
  dutchesscommunity college  Humanities    associate of arts        2009
  Binghamton                English Lit    Bachelor of arts         2011
  </code></pre>
  
  <p><br/></p>
  
  <pre><code>const getDegrees = () =&gt; {
      const xhr = new XMLHttpRequest();
      xhr.open('get', 'data/degrees.json', true);
      xhr.onreadystatechange = function() {
          if ( (xhr.readyState === 4) &amp;&amp; (xhr.status === 200) ) {
              const response = JSON.parse(xhr.responseText);
  
              const table = document.createElement("TABLE");
              table.setAttribute("id", "myTable");
              document.body.appendChild(table);
  
  
              var degrees = response.degrees;
              var degreeHeaders = Object.keys(degrees[0].degree);    
  
              var headerRow = document.createElement("TR");
              headerRow.setAttribute("id", "myTr");
              table.appendChild(headerRow);
  
             for (let i = 0; i &lt; degreeHeaders.length; i++) {
                  const headerCell = document.createElement("th");
                  headerCell.innerText = degreeHeaders[i]; 
                  headerRow.appendChild(headerCell);
              }
  
  
              for (let i = 0; i &lt; degrees.length; i++) {
  
                  let degreeData = degrees[i].degree;
                  let tr = document.createElement("TR");
                  table.appendChild(tr);
  
  
                  for (let column = 0; column &lt; degreeHeaders.length; column++) {
                      const columnProperty = degreeHeaders[column];
                      let td = document.createElement("td");
                      tr.appendChild(td);
                      td.innerHTML = degreeData[columnProperty];
                  }
              }
          }
  
      }
  };            
  const btn = document.querySelector('button');
  btn.addEventListener('click', getDegrees);
  </code></pre>
  
  <p>ALTERNATELY</p>
  
  <pre><code>const btn = document.querySelector('button');
  
  
  const getDegrees = () =&gt; {
      const xhr = new XMLHttpRequest();
      xhr.open('get', 'data/degrees.json', true);
      xhr.onreadystatechange = function() {
          if ( (xhr.readyState === 4) &amp;&amp; (xhr.status === 200) ) {
              const response = JSON.parse(xhr.responseText);
              function createTr(line, i) {
                  var y = document.createElement("TR");
                   y.setAttribute("id", "myTr" + i);
                   var school = document.createElement("TD");
                   school.innerHTML = line['School'];
                   var program = document.createElement("TD");
                   program.innerHTML = line['Program'];
                   var type = document.createElement("TD");
                   type.innerHTML = line['Type'];
                   var year = document.createElement("TD");
                   year.innerHTML = line['Year'];
                   y.appendChild(school);
                   y.appendChild(program);
                   y.appendChild(type);
                   y.appendChild(year);
                   return y;
            }
  
           function getDegrees() {
               var x = document.createElement("TABLE");
               x.setAttribute("id", "myTable");
               document.body.appendChild(x);
  
               x.append(createTr({"School": "School",
                           "Program": "Program",
                           "Type": "Type",
                           "Year": "Year" }, 0));
               for (var i = 0; i &lt; response['degrees'].length; i++) {
                   var line = response['degrees'][i]['degree'];    
                   var tr = createTr(line, i);
                   x.appendChild(tr);
               }        
  
           };
          }
      }
  }
  btn.addEventListener('click', getDegrees);
  </code></pre>