Exercise 13.1 for Eloquent Javascript

elojs_13.1.js

<style>
  /* Defines a cleaner look for tables */
  table  { border-collapse: collapse; }
  td, th { border: 1px solid black; padding: 3px 8px; }
  th     { text-align: left; }
</style>

<script>
  var MOUNTAINS = [
    {name: "Kilimanjaro", height: 5895, country: "Tanzania"},
    {name: "Everest", height: 8848, country: "Nepal"},
    {name: "Mount Fuji", height: 3776, country: "Japan"},
    {name: "Mont Blanc", height: 4808, country: "Italy/France"},
    {name: "Vaalserberg", height: 323, country: "Netherlands"},
    {name: "Denali", height: 6168, country: "United States"},
    {name: "Popocatepetl", height: 5465, country: "Mexico"}
  ];
  function buildTable(data) {
    // Your code here.
    var table = document.createElement("table");
    var row = document.createElement("tr");
    var header = []
  
    table.appendChild(row);
    
    Object.keys(data[0]).forEach(function (header) {
      var th = document.createElement("th");
      th.textContent = header;
      this.push(header);
      row.appendChild(th);
    }, header);

    data.forEach(function (mountain) {
      var tr = document.createElement("tr");

      this.header.forEach(function (prop) {
          var td = document.createElement("td");
          td.textContent = mountain[prop];
          this.appendChild(td);
      }, tr);

      this.table.appendChild(tr);
    }, {table: table, header: header});
    
    
    return table;
    
  }

  document.body.appendChild(buildTable(MOUNTAINS));
</script>