IE console.table Functionality

This is a way to enable IE browsers to use the console.table functionality that is given in modern web browsers such as Firefox and Chrome.

This allows us to view data in a table layout, takes an object as an input. There is also an optional ‘columns’ parameter which takes the form of an array of strings similar to the Chrome console.table.

From the example given by Google:

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.ietable(family, ["firstName", "lastName", "age"]);

We get:

index | firstName | lastName | age
mother | Susan | Doyle | 32
father | John | Doyle | 33
daughter | Lily | Doyle | 5
son | Mike | Doyle | 8 

Similar to:

JavaScript:

console.ietable = function(data, columns) {
  if (data.constructor === Object) {
    if (typeof columns != "object") {
      var columns = [];
      for (var index in data) {
        for (var prop in data[index]) {
          if (columns.indexOf(prop) == -1) {
            columns.push(prop);
          }
        }
      }
    } else {
      var header = "index" 
      for (var p in columns) {
        header += " | ";
        header += columns[p];
      }
      console.log(header);
    }

    for (var obj in data) {
      var entry = data[obj];
      var entryStr = obj+"";
      for (var j = 0; j < columns.length; j++) {
        entryStr += " | ";
        entryStr += entry[columns[j]];
      }
      console.log(entryStr);
    }

  } else if (data.constructor === Array) {
    if (typeof columns != "object") {
      var columns = [];
      for (var index in data) {
        for (var prop in data[index]) {
          if (columns.indexOf(prop) == -1) {
            columns.push(prop);
          }
        }
      }
    } else {
      var header = "index" 
      for (var p in columns) {
        header += " | ";
        header += columns[p];
      }
      console.log(header);
    }

    for (var i = 0; i < data.length; i++) {
      var entry = data[i];
      var entryStr = i+"";
      for (var j = 0; j < columns.length; j++) {
        entryStr += " | ";
        entryStr += entry[columns[j]];
      }
      console.log(entryStr);
    }
  }
}

Future Work: (mostly style enhancements)

• Table alignment
• Table bordering
• Further testing

Hosted on: https://github.com/chrisrng/ie-console-table