knockout binding with Nested loop inside bootstrap table

Question

The above image shows the result after binding the data with knockout array. However the expected result is not like this. I want the below result as shows in the image

HTML Code

<table class="table tableMini top10">
    <thead>
        <tr>
            <th>Workflow</th>
            <th style="width:190px;">Access</th>

        </tr>
    </thead>
    <tbody data-bind="foreach: Access_label">
        <tr>
            <td data-bind="text: $data.Application">
                <strong/>
            </td>
            <td>
                <input type="checkbox">
                </td>
            </tr>


            <tr>
                <td>
                    <table class="table tableMini top10">
                        <tbody data-bind="foreach: $data.ListAccessRights">
                            <tr>
                                <td data-bind="text: $data.Name">
                                    <span class="l45"/>
                                </td>
                                <td>
                                    <input type="checkbox">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>


                </tr>
            </tbody>
        </table>

The above image shows the response from the server

Knockout js code

GetRoleList: function () {
        var self = this
        $.ajax({
            type: "GET",
            url: '/Employee/GetRoleList',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                self.RoleList(data.Roles);
                self.Roles_Type_list(data.RoleType);
                self.Campaign_Type_list(data.CampaignType);
                self.Access_label(data.AccessRight);
            },
            error: function (err) {

                alert(err.status + " : " + err.statusText);

            }
        });


    }

I want to know how to perform the loop so that i can obtain the desire result

Answer 1

I would do like this :

<table class="table tableMini top10">
    <thead>
        <tr>
            <th>Workflow</th>
            <th style="width:190px;">Access</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Access_label">
        <tr>
            <td>
                <strong data-bind="text: Application"></strong>
            </td>
            <td>
                <input type="checkbox"/>
            </td>
        </tr>
        <!-- ko foreach: ListAccessRights -->
        <tr>
            <td class="l45" data-bind="text: Name"></td>
            <td>
                <input type="checkbox"/>
            </td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>