Basic fiddle

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/humanity/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<table>
    <thead>
        <tr>
            <th>Permit</th>
            <th>Region</th>
            <th>Landowner</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: requestList">
        <tr>
            <td><span data-bind="text: permit"></span></td>
            <td><span data-bind="text: region"></span></td>
            <td><span data-bind="text: landowner"></span></td>
        </tr>
    </tbody>
    <tbody data-bind="if: requestList().length === 0">
        <tr>
            <td colspan="3">No Data</td>
        </tr>
    </tbody>
</table>

<button id="loadData">Load Data</button>

CSS

td, th{
    
  padding-left: 2px;  
  padding-right: 2px;    
}

JavaScript

$(document).ready(function() {
    var a = [{
        permit: "permit1",
        region: 'region1',
        landowner: 'landowner'},
    {
        permit: "permit2",
        region: 'region2',
        landowner: 'landowner2'}];
    //debugger;
    var vm = {};
    vm.requestList = ko.observableArray([]);

    ko.applyBindings(vm);

    $('#loadData').click(function() {
        var a1 = ko.mapping.fromJS(a);
        var b1 = a1();
        vm.requestList(b1);

    });

});