JSFiddle - React, Tailwind, and code Playground

by manchagnu

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<div class="yui3-skin-sam" id="datatable" data-bind="foreach: {data: generations}">
    <img data-bind="attr:{src:imgURI}"></img>

    <div data-bind="foreach: {data: relations}">
        <table data-bind="foreach: {data: ko.utils.hashMap($data) }">
            <tr>
                <td data-bind="text: item.age"></td>
                <td data-bind="text: item.firstName"></td>
                <td data-bind="text: item.lastName"></td>
                <td data-bind="text: item.priority"></td>
                <td data-bind="text: item.profession"></td>
            </tr>
        </table>
    </div>
</div>

JavaScript

ko.utils.hashMap = function (hash, mapping) {
    hash = hash || {};
    mapping = mapping || function (item) { return item; }
    var result = [];
    for (var i in hash)
        result.push({name: i, item: mapping(hash[i])});
    return result;
}


var data  = {
"generations": [{
"type": "Modern",
    "showName": "The Modern Generation",
    "imgURI": "file:/D:/projectGen.png",
    "relations": {
        "father": {
            "age": "49",
            "firstName": "George",
            "lastName": "Mathews",
            "priority": "1",
            "profession": "Service"
        },
        "mother": {
            "age": "47",
            "firstName": "Susan",
            "lastName": "Aldrin",
            "priority": "2",
            "profession": "Home-Maker"
        },
        "brother": {
            "age": "28",
            "firstName": "Martin",
            "lastName": "Mathews J",
            "priority": "3",
            "profession": "Engineer"
        },
        "sister": {
            "age": "23",
            "firstName": "Laura",
            "lastName": "Mathews J",
            "priority": "4",
            "profession": "Fashion Model"
        },
        "aunt": {
            "age": "50",
            "firstName": "Sally",
            "lastName": "Bekkers",
            "priority": "5",
            "profession": "Singer"                
        }
    }
}]};

ko.applyBindings(data);