Untitled

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Trolololo
    </title>
    <script type="text/javascript">
      var trololo = (function(){
        var arraycollection = [
          {
            "date":"2015-10-01",
            "color":"blue",
            "number":"5",
            "shape":"round"
          },
          {
            "date":"2015-10-02",
            "color":"blue",
            "number":"5",
            "shape":"square"
          },
          {
            "date":"2015-10-03",
            "color":"blue",
            "number":"5",
            "shape":"square"
          },
          {
            "date":"2015-10-04",
            "color":"green",
            "number":"5",
            "shape":"Rectangle"
          },
          {
            "date":"2015-10-05",
            "color":"Blue",
            "number":"5",
            "shape":"Rectangle"
           }
        ];

        function rowfilter(cur, prev){
          var outp = {};
          if (prev == null){
            return [cur];
          }

          var differs = 0;
          for (var k in prev){
            if (k == 'date'){
              outp[k] = cur[k]
              continue;
            }
            if (k in cur && cur[k] != prev[k]){
              outp[k] = cur[k];
              differs+=1;
            }
            else{
              outp[k] = '';
            }
          }
          return (differs > 0 ? [outp] : []);
        }

        return function(){
          var prev = null;
          var filtered = []
          for (var i in arraycollection){
            var l = arraycollection[i];
            filtered = filtered.concat(rowfilter(l, prev));
            console.log(l);
            console.log(prev);
            console.log(filtered.length);
            prev = l;
          }

          var tkeys = ['date','color', 'number', 'shape'];
          var tbody = document.getElementsByTagName('tbody')[0];
          for (var i in filtered){
            var nr = document.createElement('tr');
            tbody.appendChild(nr);
            for(var k in tkeys){
              var nc = document.createElement('td');
              nc.appendChild(document.createTextNode(filtered[i][tkeys[k]]));
              nr.appendChild(nc);
            }
          }
        }
      }());
    </script>
  </head>
  <body onload="trololo()">
    <table>
      <thead>
        <tr>
            <th>Date</th>
            <th>Color</th>
            <th>Number</th>
            <th>Shape</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
</html>