HTML Table nested json data to show in table

Question

How to achieve the above image? The json is like this

{"track":
   {"category1":
        {"skill": "skill1","skill2","skill3","skill4"}
   }
   {"category2":
       {"skill":"skill1","skill2","skill3","skill4"}
   }
} 

Here is what I already tried so far. I don't get how to make the 3rd column.

<table class="table table-striped table-condensed table-bordered table-overflow">
        <thead>
            <tr>
                <th style="text-align:center" width="33%">Track</th>
                <th style="text-align:center" width="33%">Category</th>
                <th style="text-align:center" width="33%">Skills</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="{{addTCS.trackSpan}}" style="vertical-align:middle;">
                    <input type="text" class="form-control" style="max-width: none;" name="track"/>
                </td>
                <td colspan="2" style="vertical-align:middle;">
                    <table class="table borderless">
                        <tbody id="categoryContainer">
                            <tr style="background-color: #f9f9f9;">
                                <td width="33%"><input type="text" class="form-control" style="max-width: none;" name="category" /></td>

                                <td id="skillParentContainer" width="33%">
                                    <table class="table borderless">
                                        <tbody id="skillContainer">
                                            <tr style="background-color: #f9f9f9;">
                                                <td><input type="text" class="form-control" style="max-width: none;" name="category" /></td>
                                            </tr>
                                        </tbody>
                                        <tfoot style="background-color: #f9f9f9;">
                                            <tr><td><small><a href="" class="text-primary pull-right" ng-click="addTCS.addSkill()">+ Add Skill</a></small></td></tr>
                                        </tfoot>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot style="background-color: #f9f9f9;">
                            <tr><td><small><a href="" class="text-primary pull-right" ng-click="addTCS.addCategory()">+ Add Category</a></small></td></tr>
                        </tfoot>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>