JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
<table id="people">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Occupation</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

JavaScript

/*
 * Just some data that we may have gotten from a web service
 */
var Person = function Person(name, email, occupation) {
  this.id = _.uniqueId();
  this.name = name;
  this.email = email;
  this.occupation = occupation;
};

var data = [
  new Person("Tom Mason", "[email protected]", "History professor"),
  new Person("Sheldon Cooper", "[email protected]", "Theoretical physicist"),
  new Person("Luke Skywalker", "[email protected]", "Saviour of the universe"),
  new Person("Barney Stinson", "[email protected]", "?")
];

var output = document.body.querySelector("#people tbody");

/*
 * Some functions that will help us program in a functional way
 */
var propOf = function(obj) {
  return function(name) {
    return obj[name];
  };
};

var append = function(parent, child) {
  parent.appendChild(child);
  return parent;
};

var createTextNode = document.createTextNode.bind(document);

var wrap = function(elementType) {
  return function(child) {
    var parent = document.createElement(elementType);
    parent.appendChild(child);
    return parent;
  };
};

/*
 * Actual implementation
 */
_(data).map(function(person) {
  return _(["id", "name", "email", "occupation"])
    .map(propOf(person))
    .map(createTextNode)
    .map(wrap('td'))
    .reduce(append, document.createElement("tr"));
}).reduce(append, output);